Este sitio muestra anuncios que pueden estar patrocinando el contenido u ofreciendo enlaces de afiliados

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 1Web Gratis ejemplo
  • Web Gratis ejemplo 2Web Gratis ejemplo