Hi,
I’m creating a site that has multiple images which have an 8px border when you hover over them.
The problem is that when an image has a border the content below moves down by 8px. The gap below the images is more that 8px so is there a way to stop the content below moving?
The images are inside two columns, each with some text below, inside a container.
Sorry if this has been asked before, I wasn’t sure how to word a search.
Thanks, David
Here’s an example:
https://webflow.com/design/contentexample?preview=ac85c63a2cb30d6d46d35a35ed109c97
Is it possible to stop the images below moving down?
One thing that you could do is give the images a border of the same width in a color that matches the background.
In this case, give the static/none state a border of 8px in white. It’s a bit of a cheat, but it will work 
Let me know if this works for you!
Mat
Hey I’ve been playing with borders here: http://sab.webflow.com/img-hover-effects
It shows your problem I think, and 5 possible solutions. @Mat’s is solution 2 most probably, make the borders transparent instead (:
Yup transparent borders works too! 
Thanks for the replies!
@vincent I wanted the image to get a little smaller so setting the pixels like number two works great.
One more question if you use a transition to make it zoom in nicely, can you make it transition back smoothly instead of snapping?
Ah, I worked out how to do it.
In the normal state (none), if you add a border of 0px and make the colour transparent then it will fade back out smoothly.
Yep, see the 3 last examples http://sab.webflow.com/img-hover-effects
Whoops I missed those ones 
Hey guys
I got the same problem right now. Unfortunately the link isn’t working anymore.
The difference between me and @grdn is that my pictures have a spacer of 2px between each other. So I can’t do the work around with the border in the same color as the backround.
It also seems to me, as the border is only “growing” on the bottom side. Is it possible to stop this? Why does the border affect the size of the image?
Here you’ll find my example. In the bottom of the page, there is the border problem: https://preview.webflow.com/preview/joelwantsthatjob?preview=85c4cfee1c5a7a9e3ee0aa388403cd44
Many thanks for your help!
edit: I need to say, that I’m not working with pixel sizes, but %
It’s not the border, it’s the top padding you gave to the text of the unfolding node. It affects the size of the element in a way that is called the CSS box model, or how a box size is calculated. And paddings and margins are excluded, so your text, at height:0, is in fact 15px height. So when interaction runs, it starts by displaying the element, from none to block, so you get a “pop” of 15px while the unfolding starts.
Nest your text element in a div and make the interaction affect this div instead. Let the padding in the text element, don’t put up and down margins, padding or borders or you’ll affect its zeroed height again.
You could also decide to not use display:none at all in your interaction, as your zeroed text is invisible anyway. Using display:none helps often to avoid a visual glitch at page load, the block can be rendered open then shrunk. As your page is long and the section low, it should go unnoticed if it happens.
I just checked again, noticed you have 1 interaction per animated block.
You don’t have to write every single interaction if they are the same, you can reuse them. You only need a little change in your structure. Put your little round button at the same level than the text container, or more precisely the div I told you to create above to nest your text in. So put the round button at the same level, and when in the interaction you select the div object by name, click in the box in front of “limit to siblings”. Affect your interaction to all your buttons, and make sure the targeted div has the same name. Use height:auto to target the original size of the text blocks automatically.
Hey Vincent
Many thanks for your help. Sorry, that I’m writing now from another account
Actually, that was what I had before I think. But then I had the problem, if I clicked on the button, all boxes appeared. Instead of just the one i clicked on.
Actually my post was because of another Problem. In the last section of this page, there are 5 images. This is where the border Problem happens.
If you apply what I described before, with the “limit to sibling” option, it won’t affect all the elements of the same name… the limitation is there for that.
The reason is the same: the box model.
The solution is to have a div exactly on top of your image (absolute positionned) and add a inner shadow to it. Look at this page, look at the 6th example, this is what you want to achieve I think : http://sab.webflow.com/html/img-hover-effects**strong text**
Great. I’ll check it out this evening. Many Thanks
It worked great. Many thanks for your Tip! But now, I’ve got the next problem 
I wanted to set an interaction on the link block (sibling with the image) that affects the image and does shrink it a little by hover over it. When hovering out, it should get its normal size.
I managed to shrink it by hover in. But hover out doesen’t work out. And actually this interaction disables the hover effect of the Link Block… I don’t get what I’m doing wrong.
Check out the biggest block with “SchnauZug” Logo
Many thanks for help
the link does not work for me anymore
actually it works.
Add a z-index:10 to your block (the link with interaction) and it will work. But it work great on the other two images with only the :hover state, no?
Perfect! Many thanks. I tried out almost every setting, but didn’t play around with z-index. 
Yes, the others work great many thanks for your help. I do really appreciate this!