March 2014

<div dir="ltr" style="text-align: left;" trbidi="on"><style>
.all { margin: 0px auto; }
.container { float:left; margin: 10px; }
.container .imgb { display: none; position: absolute; }
.container:hover .imgb { display: block; z-index: 999; }
.clearbyrahul { clear:both; }
</style> <span style="color: #990000; font-size: large;"><b>DEMO:</b></span><br />
<hr /><div class="all"><div class="container"><img class="imga" src="https://d2mdw063ttlqtq.cloudfront.net/files/86270249/Thumbnail.jpg" /> <img class="imgb" src="https://d2mdw063ttlqtq.cloudfront.net/files/86270251/screenshots/00_preview.__large_preview.jpg" /></div><div class="container"><img class="imga" src="https://d2mdw063ttlqtq.cloudfront.net/files/76505202/xthumb.png" /> <img class="imgb" src="https://d2mdw063ttlqtq.cloudfront.net/files/74955771/x-preview.__large_preview.png" /> </div><div class="container"><img class="imga" src="https://d2mdw063ttlqtq.cloudfront.net/files/68409017/thumb.jpg" /> <img class="imgb" src="https://d2mdw063ttlqtq.cloudfront.net/files/53916328/images/1_preview.__large_preview.jpg" /> </div></div><div class="clearbyrahul"></div><br />
<hr /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzJlh2aI48UIW4CkscKLBfsHsXylU1qw8OjTOxxXy22WxJY2Rlb-JdBx-QJtWLtx_FjDyAyY4W5g4MPyJqC24LbxVxGVErEQ-E1CCONGwAiQvEreSR_EglCpKdXpoeG8-onA8XIsBfi_M/s1600/hovegallery.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzJlh2aI48UIW4CkscKLBfsHsXylU1qw8OjTOxxXy22WxJY2Rlb-JdBx-QJtWLtx_FjDyAyY4W5g4MPyJqC24LbxVxGVErEQ-E1CCONGwAiQvEreSR_EglCpKdXpoeG8-onA8XIsBfi_M/s1600/hovegallery.jpg" width="400" /></a></div><b>For Making this Effect:</b><br />
We have to Defined only four class on CSS as following:<br />
<br />
<b>.container </b>{<br />
float:left;<br />
margin: 10px;<br />
}<br />
<b>.imgb { </b><br />
display: none;<br />
position: absolute;<br />
}<br />
<b>.container:hover .imgb { </b><br />
display: block;<br />
}<br />
<b>.clear { </b><br />
clear:both;<br />
 }<br />
<div><br />
</div><div><b><span style="font-size: large;">Description:</span></b></div><div><b>container:</b><br />
<b></b>We have take attribute of float to left, so that our gallery 's Images will be distributed as a uniform manner.<br />
<b>imgb:</b><br />
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.<br />
<b>.container:hover .imgb</b><br />
This property is the main point for this. The display of the class <b>imgb </b>is going to block after hovering on class <b>container.</b><br />
<b>clear:</b><br />
This div is made for breaking the flow of content from left i.e.  float:left will be disable after this.<br />
<b><br />
</b></div><b>Now we have to make HTML:</b><br />
<br />
{<br />
<div class="container"><br />
<img src="short-image-url"><br />
<img src="large-image-url" class="imgb"><br />
</div><br />
}<br />
<div class="container"></div><br />
<div><br />
</div><b>Note: </b>Between the { } code you have to write no of times is equal to number of images you have to show on gallery.<br />
<div class="clearbyrahul"></div></div>

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; ...