CSS: image gallery with clip

This post will show you how to create an image gallery using the CSS clip property to add a dynamic effect on hover. If you want to know the theory behind this and other similar examples, check out this excellent tutorial on the subject. First of all, we start with the underlying markup, as usual:

<div id="gallery">
 <div class="left">
   <img/>
 </div>
 <div class="center">
   <img/>
 </div>
 <div class="right">
 <img/>
 </div>
</div>

The clip property works on absolutely positioned elements. The secret here is to use this property on the image containers, not on the image themselves:

#gallery {
 padding: 2em 0;
 height: 250px;
 width: 810px;
 position: relative;
 margin: 0 auto;
}

#gallery img, #gallery div {
 width: 270px;
 height: 230px;
 display: block;
 cursor: pointer;
}

#gallery div {
 position: absolute;
}

#gallery .left {
 top: 0;
 left: 0;
}

#gallery .center {
 top: 0;
 left: 270px;
}

#gallery .right {
 top: 0;
 right: 0;
}

#gallery div:hover {

   clip:rect(20px 260px 260px 20px)

}

We clip the images on hover with a nice effect. You can see the demo below.

Demo

Live demo