Check out this HTML:
<div class="float">
<img class="left" src="bradBeachHeart.JPG" alt="Brad at the Lake" />
<img class="left" src="mariaNavi.jpg" alt="Making Maria Na'vi" />
<img class="left" src="mattWaterRun.jpg" alt="Photoshopped Matt" />
</div>
This content is styled to align on the side of the page using the following CSS rules:
div.float
{
border-right: 1px solid orange;
position: absolute;
z-index: 2;
margin-left: 5px;
margin-top: 5px;
float: left;
width: 200px;
}
div.mask
{
position: relative;
z-index: 1;
margin-top: 5px;
float: left;
width: 206px;
height: 805px;
background-color: white;
}
img.left
{
z-index: inherit;
margin-bottom: 3px;
float: left;
width: 200px;
min-height: 200px; /* for modern browsers */
height: auto !important; /* for modern browsers */
height: 200px; /* for IE5.x and IE6 */
opacity: 0.4;
filter: alpha(opacity=40);
}
img.left:hover
{
opacity: 1;
}
The column of images displayed includes album covers, but there's a need to add album titles to each cover. These titles should appear inside an orange rectangle with white text, vertically centered over the image. The challenge lies in aligning these titles correctly based on the varying heights of each image.
In addition to the main styling, there is a gradient effect that causes the top of the first image to fade into white and the bottom of the last image to fade into white. Hovering over the gradient triggers a scrolling feature using jquery. However, maintaining these gradients' fixed locations and cutting off image edges when resizing the page is proving difficult.
Another requirement is to set the album title at 90% opacity and the image at 40% opacity. When hovering over the image or title, they should both transition to 100% and 30% opacity respectively, creating a smooth visual effect. Resolving this opacity change during hover states presents another challenge.