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: Animation, css

By : Motyar+ @motyar