Motyar

Freelance Web Developer

Mar 15, 2010

Simplest image gallery with pure css

I love keeping things simple as i can, yes i am a minimalist. This is the reason i try to avoid JavaScript. Today i am with you to demonstrate how we can create image gallery just with css.

The idea

The ideas was simply simple. Define a child element hidden and show it on parent element's hover on a fixed positon.

Code

css
 a {
    text-decoration:none;
   }
a:hover{
    text-decoration:none;
    color:red;
   }
a span {
    display:none;
    padding:2px 3px;
    top:27;
    left:8;
    position:fixed;
   }
a span img{
  width:266px;
  height:200px;
  border:none;
}
a:hover span{
     display:inline;
     position:absolute;
   } 


Html

<a href="#" >Google<span>
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" /></span>
</a

DEMO

you can see this code in action here.

Related Articles

Minimal todo list with Jquey
Jquery data filter

Labels: ,


By :