Currently facing an issue where three separate images are being transformed using CSS3 upon hover.
Various attempts have been made, including placing them in divs, a table, or just plain images. Trying to float them all in one direction, with #1 left, #3 right, #2 none. And also experimenting with z-index for overlaying, but no success so far.
Any assistance would be highly appreciated.
CSS:
#contentrecent {
float: right;
width: 380px;
height: 400px;
}
#contentrecent img {
float: left;
width: 120px;
height: 350px;
background-image:url(images/snapshot1.jpg);
overflow:hidden;
position: relative;
transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
}
#contentrecent img:hover {
z-index: 1;
width:600px;
height: 350px;
position: relative;
transform: translate(-400px,-100px);
-webkit-transform: translate(-400px,-100px);
}
HTML:
<div id="contentrecent">
<h1> Recent </h1>
<table>
<tr>
<td width="120" height="300" align="left"><img src="images/snapshot1.jpg" /></td>
<td width="120" height="300" align="left"><img src="images/snapshot2.jpg" /></td>
<td width="120" height="300" align="left"><img src="images/snapshot3.jpg" /></td>
</tr>
</table>
</div>