With the assistance of a generous contributor on stackoverflow, I was able to overlay different colored CSS boxes onto various images. These boxes could be removed upon mouseover, revealing the images beneath. You can view the code I used on fiddle here.
As a beginner, I attempted to align the boxes horizontally by enclosing the images in another class (float) within the rollover class. Unfortunately, this caused the rollover effect to stop working.
Is there a more effective way to implement the float alignment than what I have tried below?
Thank you in advance for your assistance.
<div class="float">
<div class="rollover a">
<img src="http://blahblah.com/wp-content/uploads/2011/01/1.jpg" />
</div>
</div>
<div class="float">
<div class="rollover b">
<img src="http://blahblah.com/wp-content/uploads/2011/01/2.jpg" />
</div>
</div>
<div class="float">
<div class="rollover c">
<img src="http://blahblah.com/wp-content/uploads/2011/01/3.jpg" />
</div>
</div>
.float
{
float: left;
width: 200px;
border: 1px solid #fff;
margin: 0 15px 15px 0;
padding: 5px 10px 10px 10px;
}