While everything works fine with the CSS code for hovering effects on these images, I am facing a challenge in re-arranging their position on the page.
Currently, they are stacked vertically on top of each other. How can I make them appear side by side?
body {
color:#000000;
background-color:#000000;
background-image:url('Background Image');
background-repeat:no-repeat;
}
a { color:#0000FF; }
a:visited { color:#800080; }
a:hover { color:#008000; }
a:active { color:#FF0000; }
#cf {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
#cf img {
position:absolute;
left:0;
-webkit-transition: opacity 200ms ease-in-out;
-moz-transition: opacity 200ms ease-in-out;
-o-transition: opacity 200ms ease-in-out;
transition: opacity 200ms ease-in-out;
}
#cf img.top:hover {
opacity:0;
}<a href="http://example.com/page1">
<div id="cf">
<img class="bottom" src="images/img_a_1.jpg" />
<img class="top" src="images/img_a_2.jpg" />
</div></a>
<a href="http://example.com/page2">
<div id="cf">
<img class="bottom" src="images/img_b_1.jpg" />
<img class="top" src="images/img_b_2.jpg" />
</div></a>
<a href="http://example.com/page3">
<div id="cf">
<img class="bottom" src="images/img_c_1.jpg" />
<img class="top" src="images/img_c_2.jpg" />
</div></a>