I am attempting to create a basic CSS3 hover effect on an image. My goal is to have half of the image appear transparent when hovered over. For demonstration purposes, I have set it to black.
<div class="section">
<img src="http://placekitten.com/110/155" />
<div class="efx" />
</div>
.section{
width:700px;
background-color:orange;
height:170px;
position:relative;
margin:50px;
}
.section:hover .efx{
height:155px;
}
img{
width:110px;
height:155px;
}
.efx{
overflow:hidden;
background-color: black;
z-index: 10;
left: -51px;
position: absolute;
height: 0px;
width: 105px;
transition: all .5s ease-in;
transform: skew(35deg, 0deg);
bottom:15px;
}
If you view the Fiddle here http://jsfiddle.net/5ST86/ you can see the current result. Below is my desired outcome.