Alt-Web Design & Publishing
Pure CSS Disjointed Image Gallery
(with opacity)

Description:

Mouse over the browser icons below to reveal absolutely positioned span tags. The thumbnail images have opacity set to 50%. On hover, the opacity switches to 100%.

This disjointed rollover method relies on pure CSS without need for JavaScript behaviors. Therefore, it will work even when JavaScript is disabled. Also works with the tab key for people who may be unable to use a mouse. Tested and works in FF3.6, IE6+, Opera 10, Safari 4 and Chrome.

Gallery Example:

 

 

 

How I survived a computer disaster

 

Spam Filter - Free Trial

CSS Code

#wrapper {position:relative}

#rollover a {
border:none;
text-decoration:none;
/**space between icons**/
padding: 0 0.5em 0 0.5em;
/**Opacity of icons**/
filter:alpha(opacity=50);
opacity:0.5;
}

#rollover a span {
visibility:hidden;
background-color: #FFF;
display:block;
position: absolute;
/**adjust position of full size images**/
left: 250px;
top: 425px;
/**optional full size image captions**/
font-size: 12px;
line-height: 1.2;
color:#666;
text-align: center;
/**optional full size image borders, padding**/
border: 5px solid orange;
padding: 5px;
}

#rollover a:hover span, #rollover a:active span, #rollover a:focus span {visibility:visible;}

#rollover a:hover, #rollover a:focus
{visibility:visible;
/**Opacity**/
filter:alpha(opacity=100);
opacity:10;}


Lunarpages.com Web Hosting

HTML Code

<!--begin disjointed rollovers -->

<div id="wrapper">

<div id="rollover">

<p>
<a href="#"><img src="SmallIcons/image.png" alt="" /><span><img src="FullSize/image.jpg" alt=" " /><br />optional caption #1</span></a>

<a href="#"><img src="SmallIcons/image.png" alt="" /><span><img src="FullSize/image.jpg" alt=" " /><br />optional caption #2</span></a>

<a href="#"><img src="SmallIcons/image.png" alt="" /><span><img src="FullSize/image.jpg" alt=" " /><br />optional caption #3</span></a>
</p>

</div>

</div>

<!--end disjointed rollovers -->

 
 
 
    bookmarks