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"
