I thought of writing a series of tutorials for various link techniques. When I start writing I realized that they are pretty simple (yet effective :) ) and it might be better to have them summarized.
Links (A tags) are one of the most important elements on your document. There wouldn't be any navigation without it, would it :)? The main feature that made following techniques possible is cross browser :hover pseudo class support. Each of these techniques is pure css, no ugly hacks, no JavaScript.
Pure Css Tooltip
To make this work you'll need markup like this:
<a href="#">Title <span>Tooltip</span></a>
Anchor is given position:relative and span is placed absolute and styled separately. We initially hide the span element and show it only when user hovers the link (using a:hover span selector).
Here's the css:
a{
z-index:10;
}
a:hover{
position:relative;
z-index:100;
}
a span{
display:none;
}
a:hover span{
display:block;
position:absolute;
float:left;
white-space:nowrap;
top:-2.2em;
left:.5em;
background:#fffcd1;
border:1px solid #444;
color:#444;
padding:1px 5px;
z-index:10;
}
Pure Css Image Gallery
In this trick we'll show large images when thumbnails are rolled over. We're using unordered list. In each list item we'll place an anchor eith two images, one thumbnail and one full size. Full size image is placed inside an span that we initially hide. When thumb is rolled over we set display block to hidden span and that way we display a large image.
Html structure looks like this:
<li> <a href="#"> <img src="images/02_1s.jpg" alt="gallery thumbnail" /> <span><img src="images/02_1.jpg" alt="gallery image" /></span> </a> </li>
and css:
ul#gallery, ul#gallery li{
margin:0;
padding:0;
list-style:none;
}
ul#gallery{
width:400px;
height:375px;
position:relative;
background:#e1e1e1 url(images/bg_preview.gif) no-repeat 50% 40%;
}
ul#gallery li{
float:left;
display:inline;
margin-top:300px;
}
ul#gallery a span{
display:none;
}
ul#gallery a:hover{
background:none;
z-index:100;
}
ul#gallery a:hover span{
position:absolute;
width:400px;
height:300px;
float:left;
top:0;
left:0;
display:block;
}
Pure Css Image Resizer
I once wrote about thumbnail resizing where image's visible area was resized. This trick will display larger image on mouse over and give an effect of real resized image. To achieve this we'll use similar set up as in previous example - two images, one small and one large, inside one anchor tag. Larger image is initially hidden, showed only on roll over. Since the large image is placed on top of the small one, it looks like the image has been scaled up.
Html:
<li> <a href="#"> <em><img src="images/02_1s.jpg" alt="gallery thumbnail" /></em> <span><img src="images/02_1m.jpg" alt="gallery image" /></span> </a> </li>
Css:
ul#gallery, ul#gallery li{
margin:0;
padding:0;
list-style:none;
}
ul#gallery{
margin:2em 0;
}
ul#gallery li{
float:left;
display:inline;
margin-right:5px;
}
ul#gallery a{
float:left;
display:inline;
position:relative;
}
ul#gallery a:hover{
background:none;
z-index:100;
}
ul#gallery a span{
display:none;
}
ul#gallery a:hover span{
float:left;
display:block;
cursor:pointer;
}
ul#gallery a:hover em{
display:none;
}
ul#gallery a img{
border:1px solid #999;
padding:2px;
background:#fff;
}
ul#gallery a:hover img{
border:1px solid #000;
}
3D Button Effect
This is a simple effect of a button being pushed. We need an anchor with nested span. Top and left borders are "lightened" while right and bottom are "shaded". To add more shading we'll add right and bottom border to the span as well. On mouse over we invert the border colors. Changing borders will offset the nested span one pixel to the down and to the right.
Note, In my example I have used floated anchors to get desired height, but this can be done on inline anchors as well.
Html looks like this
<a href="#" class="button"><span>Roll over here</span></a>
and css
a.button{
float:left;
font-size:110%;
font-weight:bold;
border-top:1px solid #999;
border-left:1px solid #999;
border-right:1px solid #333;
border-bottom:1px solid #333;
color:#333;
width:auto;
}
a.button:hover{
border-top:1px solid #333;
border-left:1px solid #333;
border-right:1px solid #999;
border-bottom:1px solid #999;
color:#333;
}
a.button span{
background:#d4d0c8 url(images/bg_btn.gif) repeat-x;
float:left;
line-height:24px;
height:24px;
padding:0 10px;
border-right:1px solid #777;
border-bottom:1px solid #777;
}
a.button:hover span{
border:none;
border-top:1px solid #777;
border-left:1px solid #777;
background:#d4d0c8 url(images/bg_btnOver.gif) repeat-x;
cursor:pointer;
}
Ivan 24 Apr, 2008
Steven Snell 25 Apr, 2008
Joao Oliveira 25 Apr, 2008
The gallery is very cool!
Thanks!
Rafael Masoni 25 Apr, 2008
Thanks for sharing!
DotNetYuppie 25 Apr, 2008
Majesticskull 25 Apr, 2008
nikola 25 Apr, 2008
Toni 25 Apr, 2008
b0li 25 Apr, 2008
Peter Gasston 25 Apr, 2008
david 25 Apr, 2008
Welcome to Paradise 25 Apr, 2008
Tiago Celestino 25 Apr, 2008
The CSS is very crazy! :)
Beyond Random 25 Apr, 2008
Michael 26 Apr, 2008
Luis Henrique 27 Apr, 2008
Jakub Slaby 27 Apr, 2008
Binny V A 27 Apr, 2008
Reynder Bruyns 28 Apr, 2008
Erik 29 Apr, 2008
Aminur RAHMAN [aka Tom R] 29 Apr, 2008
zoel 29 Apr, 2008
Nout van Deijck - Blog <3.14 /> 29 Apr, 2008
Thank you for all information, CSS Globe!!!
I live your unburdened and useful posts!
land surveyors united 1 May, 2008
Christopher Kata 1 May, 2008
These techniques are excellent! I'm the CTO for Spark Internet Marketing and I'm currently looking for contract designers to compliment our outstanding design team. If you're interested in extra work - please feel free to contact me!
Martin Sarsini 1 May, 2008
Matt 1 May, 2008
It would be in that case better to use what we already have available to us, the "title" attribute for anchors and display they information via DOM scripting.
CT 3 May, 2008
Denver Web Design 4 May, 2008
Kurzy Pocasie Slovniky 8 May, 2008
SARAH 8 May, 2008
Dallas Web Designer 8 May, 2008
Vibhu Satpaul 9 May, 2008
Thank you very much.
Mark Wilmot 13 May, 2008
nice 13 May, 2008
love all
Drew Aldrich 13 May, 2008
Nels 13 May, 2008
http://www.wellstyled.com/css-nopreload-rollovers.html
Fouad Masoud 15 May, 2008
http://www.some1ne.com
Freelance Web Design 16 May, 2008
javier 19 May, 2008
Mr.Ro 20 May, 2008
Web Design Liverpool 27 May, 2008
Posicionamiento 27 May, 2008
evodesign 28 May, 2008
Nice techniques.
sidhu 28 May, 2008
James Socol 30 May, 2008
Media Surgery Design 3 Jun, 2008
Thanks for taking the time to put up.
Julesgems.com 12 Jun, 2008
However, good ol' Internet Explorer just wouldn't play ball. Underlines continually appeared on the button texts until I added an extra css line:
a.button:visited{
float:left;
font-weight:bold;
border-top:1px solid #999;
border-left:1px solid #999;
border-right:1px solid #333;
border-bottom:1px solid #333;
color:#333;
width:auto;
text-decoration:none;
}
Plus Firefox and safari on a Mac show the font a little too small. Using the following css script which IE ignores, makes the text size larger in Safari and Firefox and helps Firefox with the underline problem too!
Now it works perfectly in IE as well.
Marco 16 Jun, 2008
thanks
Craig Farrall 20 Jun, 2008
Joe 22 Jun, 2008
crackafaza 26 Jun, 2008
mavirroco 30 Jun, 2008
Robert Augustin 8 Jul, 2008
Thanks!
Fernstudent 11 Jul, 2008
Regarding "Css Image Gallery" it would be great to have an initial image in the preview area...
Firebubble Design 27 Jul, 2008
These are nice link techniques.
raffaeu 28 Jul, 2008
exposed acne review 30 Jul, 2008
Mihai Stancu 30 Jul, 2008
The overall purity of code intentions were a refreshing attitude.
But the only usefull ideea was the tooltip thing. 10x for the effort
kim 6 Aug, 2008
sjl web design 11 Aug, 2008
boxing boi 11 Aug, 2008
Shannn 25 Nov, 2008
Daniel 24 Dec, 2008
First congratulations for your websites and tips.
I would like a little help with your Pure Css Image Gallery. I would like to add one more row with more pics, just above the current one. So my gallery would have two rows with 4 or 5 pics each. But.. for some how.. i am not being able to do it.
Any help ?
Thanks
ilac isimleri 14 Jan, 2009
Kupa Bardak 14 Jan, 2009
Resimler 15 Jan, 2009
web tasarim 15 Jan, 2009
Chris 16 Jan, 2009
I really would like the images to linger when a thumb is clicked thou. I guess it's something about a:active, but I just can't figure how to do it.
Does anyone know?
hagiwhat 17 Jan, 2009
Hosting 5 Mar, 2009
Vernon 26 Mar, 2009
text-to-tv 28 Mar, 2009
Resim 16 May, 2009
Resim 16 May, 2009
The overall purity of code intentions were a refreshing attitude.
But the only usefull ideea was the tooltip thing. 10x for the effort
Amanj A. Ali 26 May, 2009
sarbartha 26 May, 2009
Vishal 15 Jun, 2009
Thanks for the clean and neat code. I have tried working with few different CSS codes for gallery purpose, however not all works perfectly with Opera and Safari.
However being relatively new to CSS am having a small problem, when I try to use more than 4 images in gallery - say about 6.
In addition, I was wondering if you knew how to make the thumbs and full images always be center align.
For example, the box containing this gallery is 600 px wide. So if there were 4 to 6 thumbs, they will be center aligned (along the footer as they are now) & hover will display full images that will be center aligned in the box too.
Or an option 2, where thumbs appear on left side and on-hover image display will be on right area. Is this possible?
Thanks.
Vishal 15 Jun, 2009
Now it seems like setting up Image thumbs vertically is the real problem.
Any tips on how to get it working?
Thanks.