Tema: Imagen con overlay rollover
Ver Mensaje Individual
  #3 (permalink)  
Antiguo 30/04/2012, 23:50
Avatar de demoche
demoche
 
Fecha de Ingreso: junio-2006
Mensajes: 124
Antigüedad: 18 años, 4 meses
Puntos: 0
Respuesta: Imagen con overlay rollover
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
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset=utf-8 />
  5. <title>CSS Image Tint</title>
  6. <!--[if IE]>
  7.   <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  8. <![endif]-->
  9. <style>
  10.   
  11.   .tint {
  12.     position: relative;
  13.     float: left;
  14.     width:75px;
  15.     height:75px;
  16.     margin-right: 20px;
  17.     margin-bottom: 20px;
  18.     cursor: pointer;
  19.     -webkit-box-shadow: rgba(0,0,0,.2) 3px 5px 5px;
  20.     -moz-box-shadow: rgba(0,0,0,.2) 3px 5px 5px;
  21.     box-shadow: rgba(0,0,0,.2) 3px 5px 5px;
  22.   }
  23.   
  24.   .tint:before {
  25.     content: "";
  26.     display: block;
  27.     position: absolute;
  28.     top: 0;
  29.     bottom: 0;
  30.     left: 0;
  31.     right: 0;
  32.     background: rgba(236, 126, 40, 0.6);
  33.     -moz-transition: all .3s linear;
  34.     -webkit-transition: all .3s linear;
  35.     -ms-transition: all .3s linear;
  36.     -o-transition: all .3s linear;
  37.     transition: all .3s linear;
  38.   }
  39.   
  40.   .tint:hover:before {
  41.     content: "";
  42.     background: none;
  43.   }
  44.   
  45.  
  46. </style>
  47. </head>
  48. <body>
  49.     
  50.  
  51.  
  52.   <div class="tint">
  53.       <img src="imagen.jpg" width="75" height="75" />
  54.   </div>
  55.  
  56.   
  57. </body>
  58. </html>