Mostrar transparência ao passar o mouse sobre imagens com CSS

  • Autor Autor epsilo99
  • Data de início Data de início
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
epsilo99

epsilo99

1
Xi
Verificación en dos pasos activada
Suscripción a IA
Hola, quisiera mostrar una imagen transparente sobre las imágenes de mi sitio al pasar el mousse sobre ellas, podría ser una lupa o algo así que se vea como una transparencia...

Quisiera hacerlo con css sólamente!

Gracias!
 
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Leva 30 segundos · você volta a este tópico ao terminar
Tienes que usar position:absolute para que puedas mostrar las dos imagenes una encima de la otra

aquí un ejemplo:

HTML:
<div id="postthumb">
  <div id="postthumbimg">
    <a href="#"><img src="http://www.fliparegalos.com/image/cache/data/235201213581465584d-168x168.jpg" /></a>
  </div>
  <div id="overlay"></div>
 </div>


Inserir CODE, HTML ou PHP:
#postthumb {
  width: 282px;
  height: 152px;
}

#postthumb #overlay {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 282px;
  height: 152px;
  text-align: center;
}

#postthumb #overlay:hover {
  position: absolute;
  opacity: .7;
  background: url(http://us.cdn4.123rf.com/168nwm/triken/triken1307/triken130700025/20761438-vector-realista-con-lupa-sombra-sobre-fondo-gris.jpg) no-repeat;
  transition: opacity 150ms ease-in-out 0s;
  width: 282px;
  height: 152px;
}


Puedes ver el ejemplo en este link CodePen - A Pen by LulaV14
 
Excelente!
Muchas gracias!

Lo implementaré!
 
La propiedad "Hover" como te dijo [MENTION=32137]LulaV14[/MENTION].
 
codepen me parece mejor que sublimetext 😱
 
Probare ese codigo, parese bueno 😀
 
lo de la transparencia lo consigues con el codigo opacity:0.80; el maximo es 1 si lo tienes en 1 no hay transparencia y claro agregandolo en el :hover para que pueda notarse al pasar el raton.
 
Voltar
Topo