CSS
<style>
.web-gratis-img-hover ul{padding:0;}
.web-gratis-img-hover li{list-style-type:none;}
@media only screen and (max-width: 600px){.web-gratis-img-hover span img{width:60vw;bottom:1.5em;}}
@media only screen and (min-width: 901px){.web-gratis-img-hover span{left:350px;}}
@media only screen and (max-width: 900px){.web-gratis-img-hover span{right:1vw;}}
@media only screen and (min-width: 901px){li.tooltip:hover span{bottom:-150px;}}
@media only screen and (max-width: 900px){li.tooltip:hover span{bottom:1.5em;}}
.web-gratis-img-hover span img {max-width:200px;}
.itis {position:relative;z-index: 0;}
.itis li::before {content : '+ ';}
.tooltip:hover{background:#e3edf1;border-radius:5px}
li.tooltip{position:relative;opacity: 20;font-size: 14px;color: #00bcd4;font-family: "Roboto", "Helvetica", "Arial", sans-serif;}
li.tooltip span{display:none;}
li.tooltip:hover span{display:block;position:absolute;z-index:1;}
li.tooltip:hover{text-shadow: 0 1px 2px #fff;}
li.tooltip::-moz-selection{background:transparent;}
li.tooltip::selection{background:transparent;}
li.tooltip span{transition-delay: .2s;
-webkit-box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);}
</style>
HTML
<div class="web-gratis-img-hover">
<ul class="itis">
<li class="tooltip"> Web Gratis ejemplo 1<span><img title="Web Gratis ejemplo" alt="Web Gratis ejemplo" class="lazyload" src="/img/mostrar-imagen-al-hacer-hover-en-un-elemento-2.jpg"></span></li>
<li class="tooltip"> Web Gratis ejemplo 2<span><img title="Web Gratis ejemplo" alt="Web Gratis ejemplo" class="lazyload" src="/img/mostrar-imagen-al-hacer-hover-en-un-elemento.jpg"></span></li>
</ul>
</div>
Ejemplo:
- Web Gratis ejemplo 1
- Web Gratis ejemplo 2