Opacity question

I know this is Opacity (well ok, I think it is)

http://www.badboy.ro/

I don't know how he makes the rest of the 5 images darker while one is highlighted?

Thanks
le007 is online now Report Post Edit/Delete Message

 

I think it's javascript.

 

I could do that without opacity. You create all those images as as a single image as a row going straight across, then copy it to another line below it and apply the opacity there.

You then slide the backgrounds around in their boxes for their states... To do the unhighlight of non-active images, you'd trap hover/active on the UL. In their code that is marked up thus:

<ul id="works">
			<li class="w01"><a href="/portfolio/change/" title="View the Change casestudy"><i>Change</i></a></li>
			<li class="w02"><a href="/portfolio/phillyliving/" title="View the PhillyLiving casestudy"><i>PhillyLiving</i></a></li>
			<li class="w03"><a href="/portfolio/insight/" title="View the Insight casestudy"><i>Insight</i></a></li>
			<li class="w04"><a href="/portfolio/homethinking/" title="View the Homethinking casestudy"><i>Homethinking</i></a></li>
			<li class="w05"><a href="/portfolio/companions/" title="View the Companions casestudy"><i>Companions</i></a></li>
			<li class="w06"><a href="/portfolio/younoodle/" title="View the YouNoodle casestudy"><i>YouNoodle</i></a></li>
		</ul>

Code (markup):

I would probably not use the italics to nest, instead using empty spans to overwrite the anchor text.

<ul id="works">
			<li class="w01"><a href="/portfolio/change/" title="View the Change casestudy">Change<span></span></a></li>
			<li class="w02"><a href="/portfolio/phillyliving/" title="View the PhillyLiving casestudy">PhillyLiving<span></span></a></li>
			<li class="w03"><a href="/portfolio/insight/" title="View the Insight casestudy">Insight<span></span></a></li>
			<li class="w04"><a href="/portfolio/homethinking/" title="View the Homethinking casestudy">Homethinking<span></span></a></li>
			<li class="w05"><a href="/portfolio/companions/" title="View the Companions casestudy">Companions<span></span></a></li>
			<li class="w06"><a href="/portfolio/younoodle/" title="View the YouNoodle casestudy">YouNoodle<span></span></a></li>
		</ul>

Code (markup):

In any case, you would first set the spans to show the non-hover part of each image:

#works span {
position:absolute;
top:0;
left:0;
width:128px;
height:32px;
background:url(images/features.jpg) 0 0 no-repeat;
}

#works .w02 span {
background-position:-128px 0;
}

#works .w03 span {
background-position:-256px 0;
}

etc, etc, etc assuming they are 128px wide (I'm guessing).

Then you'd trap making them darker on hovering the UL

#works:active .w01 span,
#works:focus .w01 span,
#works:hover .w01 span {
background-position:0 -32px;
}

#works:active .w02 span,
#works:focus .w02 span,
#works:hover .w02 span {
background-position:-128px -32px;
}

etc, etc, etc... then you'd want to trap when they are actually hovered. If we do this after the psuedoclasses it will override them:

#works .w01 a:active span,
#works .w01 a:focus span,
#works .w01 a:hover span {
background-position:0 0;
}

and so on and so forth. You do need to state #works for specificity.

You could also double nest an opacity and position it over - which should be less CSS. Again you'd just first initialize the default (non-hover) state, then the darken for all items when the UL is hovered, and then target them individually for their hover states. (one of the few places i'd use display:none instead of positioning)

 

The way deathshadow described is similar to the way that the site does it. If you use the firebug extension, or something similar, and inspect those images, you'll be able to see the different shades of the image on the same image file lined up vertically. No opacity involved.

 

Actually, I thought of a better way than all those declarations I had above. You make the inner span double the height of the anchor, set the anchor to overflow:hidden and then just slide the span around inside it. Would mean you'd only need to set background-position once instead of for every single concievable hover state.

I'll toss together a demo/tutorial of doing this...