Hello,
I have created an image gallery with the images spaced out evenly. In my CSS I have a rule when you hover over an image, it creates a border around the image. The problem I am having is that the border is pushing the other images.
Here's the CSS code:
img.gallery
{
margin-right:5px;
}
img.gallery, img.galleryleft
{
margin-bottom:5px;
}
img.gallery:hover, img.galleryleft:hover
{
border:3px solid #009;
}
As you can see, there is already 5 pixels worth of spacing between the images. The border is creating another 3 pixels and offsetting the rest of the images. I want the three pixels of the border to "overlap" the 5 pixels created by the margin. I already tried padding, but that just created the border around the padding, obviously not what I am looking for. I also experimented and tried a 5 pixel border around the entire image. It still pushes the other images.
How can I create the border without moving anything?
Thank you in advance. 🙂
