Alt-Web Design & Publishing
Pure CSS Disjointed Image Rollovers
(aka CSS Tooltips)
Description:
Mouse over the browser icons below to reveal absolutely positioned span tags. 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.
Example: (mouse over browser icons)
![]()

Firefox Browser
![]()

Internet Explorer
![]()

Safari Browser
![]()

Firefox Browser
![]()

Internet Explorer
![]()

Safari Web Browser
![]()

Firefox Web Browser
![]()

Internet Explorer Browser
![]()

Safari Browser
![]()

Firefox Browser
![]()

Internet Explorer Browser
![]()

Safari Web Browser
CSS Code
#rollover a {
border:none;
text-decoration:none;
padding: 0 0.5em 0 0.5em; /**space between icons**/
position: relative; /**remove position rule if full size
images will share the same display area. **/
}
#rollover a span {
visibility:hidden;
background-color: #FFF;
display:block;
position: absolute;
/**adjust positioning of full size images in px or
%**/
left: 0px;
top: -140px;
/**optional image captions**/
font-size: 12px;
line-height: 1.2;
color:#666;
text-align: center;
/**optional 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;}
Earn money from your website with
Lunarpages Affiliate Program.
HTML Code
<!--begin disjointed rollovers -->
<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>
<!--end disjointed rollovers -->
Demos:
- Photoshop Tutorial - Box with Contoured Edges
- Bringing Image Slices into a CSS Layout
- CSS Disjointed Text Rollovers
- CSS Disjointed Menu Rollover
- Floats & Margins, 3 CSS Boxes
- CSS Menus
- CSS Sprites Demo I
- CSS Sprites Demo II
- CSS2 Captions on Floated Images
- CSS2 Sticky Text
- CSS3 Multi-Backgrounds
- Fixed Background Image
- Liquid Header
- Multi-Scrollbars
CSS Templates:
- Centered, Fixed-Width page with floats
- Centered, Liquid-Width page with floats
- I-Page, Liquid Header & Footer
- 1 Column, Fixed-Width Centered
- Faux Column, Fixed-Width Centered
- Right Column, Fixed-Width Centered
- 3 Column, Fixed-Width Centered
- 3 Column, Liquid Layout
- User Adjustable Page
- Horizontal & Vertical Centered
