Imagen con overlay rollover

demoche · #1 (**permalink**) 30/04/2012, 16:27

Como puedo hacer solo con CSS que cuando uno se posa con el mouse sobre una imagen, se cree sobre ella un capa de color transparente como overlay, al estilo de los overlay caption?
Hasta ahora probe con esto pero no logro ponerle color a la transparencia:(

Código CSS:

Ver original<style>
div.holder {
position:relative;
width:100px; height:100px;
}
 
div.holder a:hover {
    filter: alpha(opacity=60); 
    -moz-opacity: 0.6;
    KhtmlOpacity: .6;
    opacity: .6;
    position:absolute;
    top:0; left:0;
    width:75px; height:75px;
    z-index:110;
}
</style>

Gracias

chwc · #2 (**permalink**) 30/04/2012, 21:27

no querras hacer esto ?

Código CSS:

Ver originaldiv.holder {
position:relative;
width:100px; height:100px;
}
*
div.holder a{
   background:#000000;
}
div.holder a img.hover{width:75px; height:75px;
* * filter: alpha(opacity=60); 
* * -moz-opacity: 0.6;
* * KhtmlOpacity: .6;
* * opacity: .6;
-webkit-transition:1s linear all;
}

saludos

demoche · #3 (**permalink**) 30/04/2012, 23:50

Hasta ahora investigando pude hacer algo parecido como esto, que esta el overlay transparente en naranja (en este caso) y cuando hago hover se ve la imagen, pero me gustaria saber como hacerlo al reves.
Gracias por todas las ayudas.

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>CSS Image Tint</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  
  .tint {
    position: relative;
    float: left;
    width:75px;
    height:75px;
    margin-right: 20px;
    margin-bottom: 20px;
    cursor: pointer;
    -webkit-box-shadow: rgba(0,0,0,.2) 3px 5px 5px;
    -moz-box-shadow: rgba(0,0,0,.2) 3px 5px 5px;
    box-shadow: rgba(0,0,0,.2) 3px 5px 5px;
  }
  
  .tint:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(236, 126, 40, 0.6);
    -moz-transition: all .3s linear;
    -webkit-transition: all .3s linear;
    -ms-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
  }
  
  .tint:hover:before {
    content: "";
    background: none;
  }
  
 
</style>
</head>
<body>
    
 
 
  <div class="tint">
      <img src="imagen.jpg" width="75" height="75" />
  </div>
 
  
</body>
</html>

sergio1210 · #4 (**permalink**) 01/05/2012, 00:59

Prueba la siguiente:

Creas un

Código:

div class="contenedor"

y dentro pones la imagen y un

Código:

div class="caption"

con el caption.

Y en los estilos para que al hacer rollover sobre el contenedor te aparezca el caption haces esto:

Código:

div.contenedor div.caption {
opacity:0;
}

div.contenedor:hover div.caption{
opacity:1;
}

Eso hará que la hacer rollover sobre el div con clase contenedor su div hijo con clase caption cambie su opacidad a 1.

Luego ya con css3 le puedes hacer que haga una animación para que no sea tan brusco el cambio de opacidad.
Y acuerdate que en IE la opacidad la gestiona de otra manera, deberás añadir su hack ;)

Un saludo

demoche · #5 (**permalink**) 01/05/2012, 01:58

Gracias Sergio, estuve probando tu consejo y hay algo que hago mal porque no logro que funcione, esto es lo que hice acorde a tu consejo:

Código CSS:

Ver original<style>
.contenedor{
    width:400px;
    height:351px;
}
.caption{
    background: rgba(236, 126, 40, 0.6);
    top:0;
    left:0;
    width:400px;
    height:351px;
}
div.contenedor div.caption {
opacity:0;
filter: alpha(opacity=0); /* IE */
}
 
div.contenedor:hover div.caption{
opacity:1;
filter: alpha(opacity=50); /* IE */
}
 
</style>

Código HTML:

Ver original<div class="contenedor"><a href="#"><img src="http://laserhairtherapywestpalmbeach.com/wp-content/uploads/2011/08/Drew-barrymore-covergirl-Copy.jpg" width="400px" height="351px" /></a>
<div class="caption"></div>
</div>

Así cuando me poso sobre la imagen el overlay me aparece debajo de la imagen y no encima, que hago mal?
Gracias

sergio1210 · #6 (**permalink**) 01/05/2012, 02:35

No haces nada mal, te aparece debajo por que el orden en el html es ese, primero la imagen y después el div del caption, si pones el div encima de la imagen pues te aparecerá antes, si quieres más como por ejemplo que el caption quede superpuesto a la imagen solo te falta por estilos posicionar donde quieres que aparezca exactamente el caption.

Para posicionar el caption yo lo haría con posiciones absolutas relativas a su padre o sea el contenedor.

Deberías añadir esto al .contenedor:

Código:

position:relative;

y esto al .caption

Código:

position:absolute;

Y entonces te funcionara el top y el left que ya le pusiste, ahora juega con esos dos valores de top y left hasta dejar el caption en el lugar que quieras ;)

Un saludo

sergio1210 · #7 (**permalink**) 01/05/2012, 02:37

Por cierto si quieres que quede superpuesto y transparente deberás ponerle la opacidad a menos de 1 (0.8 o 0.7 por ejemplo) y en el hack de IE 80 o 90 ;)

demoche · #8 (**permalink**) 01/05/2012, 02:39

Muchas Gracias Sergio ahora funciona PERFECTO!

Le agrege efecto de transición también.

Código CSS:

Ver original.caption{
    position:absolute;
    top:0;
    left:0;
    width:400px;
    height:351px;
    cursor: pointer;
    background: rgba(236, 126, 40, 0.6);
    -moz-transition: all .3s linear;
    -webkit-transition: all .3s linear;
    -ms-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
 
}

Abrazos

sergio1210 · #9 (**permalink**) 01/05/2012, 03:04

De nada ;)

¿Te funciona la transición?

Yo la hubiera puesto en el div primero o el que esta en su estado inicial, este:

Código:

div.contenedor div.caption {
opacity:0;
filter: alpha(opacity=0); /* IE */
    -moz-transition: all .3s linear;
    -webkit-transition: all .3s linear;
    -ms-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
}

demoche · #10 (**permalink**) 01/05/2012, 03:07

Si me funciona bien :)

sergio1210 · #11 (**permalink**) 01/05/2012, 03:12

Claro, es que ahora que me fijo es lo mismo!! :D

Tienes un poco de desorden en el código, lo que yo te puse como

Código:

div.contenedor div.caption

es lo mismo que tu pusiste como

Código:

 .caption

o sea que todo lo que hay dentro de los dos lo puedes juntar en uno y sera lo mismo y tendrás el código mas limpio y ordenado ;)

Un saludo!

demoche · #12 (**permalink**) 01/05/2012, 03:15

Uff Gracias por la observación lo voy a correguir!
Abrazos