bluemagica
19 Nov 2010, 10:02 AM
I am making an image gallery, and I need to display images in a grid like layout. I don't want to use any frameworks, and would prefer to do things from scratch. Also, I would prefer not to use tables for the layout, since it will be a pain to add images to the table dynamically.
The layout consists of divs, like:
<div id="gallery">
<div class="uPic">
<img src="1.png">
<p> description </p>
</div>
<div class="uPic">
<img src="2.png">
<p> description </p>
</div>
....
......
....
</div>
to achieve the grid look, I simply "float"-ed all .uPics to left....and given some padding and margin to the #gallery. So far everything works great.
The PROBLEM starts, when I try to give a hover effect to the images. initially the <p> is hidden, and I use jQuery to show it on hover. but on doing so, the images below the one I am hovering over, shifts towards the right instead of moving down. Any ideas?
The layout consists of divs, like:
<div id="gallery">
<div class="uPic">
<img src="1.png">
<p> description </p>
</div>
<div class="uPic">
<img src="2.png">
<p> description </p>
</div>
....
......
....
</div>
to achieve the grid look, I simply "float"-ed all .uPics to left....and given some padding and margin to the #gallery. So far everything works great.
The PROBLEM starts, when I try to give a hover effect to the images. initially the <p> is hidden, and I use jQuery to show it on hover. but on doing so, the images below the one I am hovering over, shifts towards the right instead of moving down. Any ideas?