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>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
.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;
}
<img src="imagen.jpg" width="75" height="75" />