Gallery Hover Effect via only CSS

DEMO:

---

---

For Making this Effect:
We have to Defined only four class on CSS as following:

.container {
float:left;
margin: 10px;
}
.imgb { 
display: none;
position: absolute;
}
.container:hover .imgb { 
display: block;
}
.clear { 
clear:both;
 }

Description:

container:
We have take attribute of float to left, so that our gallery 's Images will be distributed as a uniform manner.
imgb:
This is the big image, which will be display on hover on the above div, So we have defined its attribute to display none, and the position is absolute. so that the image will not take space on pages. and will like a popup effect.
.container:hover .imgb
This property is the main point for this. The display of the class imgb is going to block after hovering on class container.
clear:
This div is made for breaking the flow of content from left i.e.  float:left will be disable after this.

Now we have to make HTML:

{
<div class="container">
<img src="short-image-url">
<img src="large-image-url" class="imgb">
</div>
}
<div class="container"></div>

Note: Between the { } code you have to write no of times is equal to number of images you have to show on gallery.