Mostrar transparencia al pasar el mouse sobre imágenes con CSS

epsilo99 · 2013-08-11T11:19:47-0500

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!

LulaV14 · 2013-08-12T04:54:45-0500

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>

Insertar CODE, HTML o 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

epsilo99 · 2013-08-12T12:51:08-0500

Excelente!
Muchas gracias!

Lo implementaré!

Carlos Perez · 2013-08-12T13:34:52-0500

La propiedad "Hover" como te dijo [MENTION=32137]LulaV14[/MENTION].

j444ck · 11 Sep 2013

interesante codigo! vamos a probarlo

Bruno · 11 Sep 2013

codepen me parece mejor que sublimetext 😱

negociosvirtuales · 15 Sep 2013

Probare ese codigo, parese bueno 😀

juliianc1995 · 20 Oct 2013

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.

Mostrar transparencia al pasar el mouse sobre imágenes con CSS

epsilo99

LulaV14

epsilo99

Carlos Perez

j444ck

Bruno

negociosvirtuales

juliianc1995

Temas similares