Create simple tooltip html css

Preview

HTML

<span class="tooltipans" data-tooltip='All your leads will be saved to your Customers tab with a "My Sticky Elements" tag so you can easily find them'>?</span>

CSS

<style>
.tooltipans{
    position: relative;
    background: rgba(0,0,0,0.7);
    padding: 2px 7px;
    border-radius: 100%;
    font-size: 12px;
    cursor: help;
    color: #FFF;
}
.tooltipans::before, .tooltipans::after{
    position: absolute;
    left: 50%;
    opacity: 0;
    transition: allease0.3s;
}
.tooltipans::before{
    content: "";
    border-width: 10px 8px 08px;
    border-style: solid;
    border-color: rgba(0,0,0,0.3) transparent transparent transparent;
    top: -10px;
    margin-left: -8px;
}
.tooltipans::after{
    content: attr(data-tooltip);
    background: rgba(0,0,0,0.7);
    top: -10px;
    transform: translateY(-100%);
    font-size: 14px;
    margin-left: -150px;
    width: 300px;
    border-radius: 10px;
    color: #fff;
    padding: 14px;
}
.tooltipans:hover::before, .tooltipans:hover::after{
    opacity: 1;
}
</style>

Create simple popup using HTML CSS

HTML

<div class="main-chaty-popup-bg"></div>
<div class="main-chaty-popup">
      <div class="main-chaty-box">
              <h4>Chaty is currently off</h4>
              <div class="popup-content">
                       <div class="popup-content-wrapper"> Chaty is currently turned off, would you like to save and show it on your site? </div>
              </div>
              <div class="popup-content-footer">
                      <button type="button" class="btn btn-primary">Yes, Show it on my site</button>
                      <button type="button" class="btn btn-default">Just save and keep it off</button>
              </div>
              <div class="modul-close-btn">
                       <a href="#"> X </a>
              </div>
        </div>
 </div>

CSS

<style type="text/css">
    .main-chaty-popup-bg {position: fixed;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color: #000; opacity: 0.5;z-index: 111;}
    .main-chaty-popup {margin:0;width: 100%;text-align: center;z-index: 1;}
    .main-chaty-box {margin: auto; padding: 0px; width: 660px; height: 170px; background: #FFF; position: fixed; top: 0; right: 0; left: 0; bottom: 0;z-index: 999;}
    .main-chaty-box h4 {background: #FCFCFC; margin: 0;padding: 10px 0 10px 10px;font-size: 22px;color: #626262;line-height: 22px;text-align: left;border-bottom: 1px solid #e5e5e5;}
    .modul-close-btn {position: absolute; right: 18px; top: 20px; transform: translate(50%, -50%); background: linear-gradient(0deg, #333, #333), linear-gradient(153.18deg, #6371DB 7.07%, #FF89C4 90.47%); border-radius: 50%; width: 22px; height: 22px; display: flex; align-items: center;justify-content: center;padding: 0; border: 0; z-index: 1; box-shadow: 0 4px 14px rgba(0, 0, 0, .15); cursor: pointer;}
    .popup-content-footer{position: absolute;bottom: 0; width: 100%; padding: 10px 0;border-top: 1px solid #e5e5e5;}
    .popup-content-footer .btn-primary{background:#00C67C;border: none;padding: 10px;color: #FFF;cursor: pointer;box-shadow: 1px 1px 2px 1px #000;border-radius: 5px;margin-right: 15px;}   
    .popup-content-footer .btn-default{background:#F7F7F7;border: none;padding: 10px;color: #655d5d;cursor: pointer;box-shadow: 1px 1px 2px 1px #000;border-radius: 5px;}
   .popup-content-wrapper{margin-top: 25px;}
 </style>

Simple zoom effect with mouse hover with HTML, CSS and JS

Preview

HTML

<div class="gallery-placeholder">
    <div class="fotorama__stage__frame fotorama__active">
        <img class="fotorama__img" src="<?php echo 'https://kansagra/jaydip/jaydip.jpg'; ?>" >
    </div>
</div>
<div class="gallery-popup fixed-full-popup-model">
    <div class="gallery-zoom-img">
        <div class="gallery-main-img" style=""></div>
    </div>
</div>

CSS

<style>
.gallery-popup {
    cursor: url(../images/zoom-out.svg),pointer;
}
body .gallery-placeholder .fotorama__stage__frame.fotorama__active .fotorama__img {
    cursor: url(../images/zoom-in.svg),pointer;
}
.gallery-popup .gallery-zoom-img .gallery-main-img {
    width: 100%;
    height: 100vh;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: cover;
}
.fixed-full-popup-model {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 21;
    background: #FFF;
    width: 100%;
    height: 100%;
    display: none;
}
</style>

JS

<script type="text/javascript">
$(document).ready(function(){
$('body .gallery-placeholder').on('click', '.fotorama__stage__frame.fotorama__active .fotorama__img',function(){
var $this = $(this);
var img = $this.attr('src');
$('.gallery-popup .gallery-zoom-img .gallery-main-img').css("background-image", "url(" + img + ")")
$(".gallery-popup").fadeIn();
$("body").css("overflow", "hidden");
});
$(".gallery-popup").on("mousemove",".gallery-main-img",function(e){
var pixelToMove=100;
var height=$(this).innerHeight();
var newValueY=(e.clientY / height)*pixelToMove;
$(this).css('background-position',0+' '+newValueY+'%');
});
$(document).keyup(function(e) {
if (e.keyCode == 27) {
    $(".gallery-popup").fadeOut();
    $("body").css("overflow-y", "inherit");
}
});
$(".gallery-popup .gallery-main-img").click(function(){
$(".gallery-popup").fadeOut();
$("body").css("overflow-y", "inherit");
$('.gallery-popup .gallery-zoom-img .gallery-main-img').css("background-image", "");
});
});
</script> 

How to Eliminate render-blocking JavaScript and CSS on WordPress

https://www.hostinger.in/tutorials/how-to-fix-eliminate-render-blocking-javascript-and-css-in-above-the-fold-content-on-wordpress

How to open simple HTML CSS popup

HTML

<div class="main-roomle-popup-bg"></div>
<div class="main-roomle-popup">
     <div class="main-roomle-box">
        <h4>Popup heading</h4>
        <p>You can put message here.</p>
        <div class="modul-close-btn"><a href="#"><img src="close.png"/></a></div>
     </div>
</div>

CSS

<style type="text/css">
body {margin: 0;padding: 0;width: 100%;} .main-roomle-popup-bg {position: fixed;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color: #000; opacity: 0.5;} .main-roomle-popup {margin:0;width: 100%;text-align: center;z-index: 1;} .main-roomle-box {margin: auto;padding: 20px;width: 360px;height: 130px;background: #000;position: absolute;top: 0;right: 0;left: 0;bottom: 0;} .main-roomle-box h4 {margin: 0;padding: 0 0 40px 0;font-size: 22px;color: #fff;line-height: 22px;} .main-roomle-box p {margin: 0;padding: 0;font-size: 18px;color: #fff;} .modul-close-btn {margin: 0;padding: 0;width: 30px;height: 30px;position: absolute;right: -10px;top: -10px;}
</style>

How to set wait/process bar/blur div using css html

Html

Add following code in you html

<div class="wait"></div>

Css

Add following code in you css

.wait{
 background: #fff url("../img/waiting.gif") no-repeat scroll center center;
 bottom: 0;
 left: 0;
 opacity: 0.5;
 position: fixed;
 right: 0;
 top: 0;
 z-index: 1;
}

Show count in li css

CSS counters are, in essence, variables maintained by CSS whose values may be incremented by CSS rules to track how many times they're used. This lets you adjust the appearance of content based on its placement in the document. CSS counters are an implementation of Automatic counters and numbering in CSS 2.1.

The value of a counter is manipulated through the use of counter-reset. counter-increment can be displayed on a page using the counter() or counters() function of the content property.

Using counters

To use a CSS counter, it must first be reset to a value (0 by default). To add the value of a counter to an element, use the counter() function. The following CSS adds to the beginning of each h3 element "Section <the value of the counter>:".

ul.count {
  counter-reset: section;
  list-style-type: none;
}
ul.count li::before {
  counter-increment: section;
  content: counters(section,".") ". ";
}

<ul class="count">
   <li>Step</li>
   <li>Step</li>
   <li>Step</li>
   <li>Step</li>
</ul>