How to avoid elements in html page movement when another element changes
I have a list of images. Below is the relevant html code:
<ul id="image_list">
<li><a href="h1.jpg"><img alt="" src="t1.jpg"></a></li>
<li><a href="h2.jpg"><img alt="" src="t2.jpg"></a></li>
<li><a href="h3.jpg"><img alt="" src="t3.jpg"></a></li>
<li><a href="h4.jpg"><img alt="" src="t4.jpg"></a></li>
<li><a href="h5.jpg"><img alt="" src="t5.jpg"></a></li>
<li><a href="h6.jpg"><img alt="" src="t6.jpg"></a></li>
</ul>
When one of the images gets focus or hover over the border, below is the code in the css page:
li a:focus img {
border: 2px solid blue;
}
li a:hover img {
border: 2px solid blue;
}
This code works, but the problem is when focus or hover appears on this shot, all the elements on the page move, it's like efect, like the whole page, jumps as you move through the image list. I have tried the following code in css with no success.
img {
position: absolute;
}
and the following:
img {
position: relative;
left: 20px;
}
Does anyone know how to fix this? thank!
source to share
Use outline
instead border
:
li a:focus img {
outline: 2px solid blue;
}
li a:hover img {
outline: 2px solid blue;
}
<ul id="image_list">
<li><a href="h1.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
<li><a href="h2.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
<li><a href="h3.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
<li><a href="h4.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
<li><a href="h5.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
<li><a href="h6.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
</ul>
source to share
You can use negative stock.
li a:focus img {
border: 2px solid blue;
margin: -2px;
}
li a:hover img {
border: 2px solid blue;
margin: -2px;
}
<ul id="image_list">
<li><a href="h1.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
<li><a href="h2.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
<li><a href="h3.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
<li><a href="h4.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
<li><a href="h5.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
<li><a href="h6.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
</ul>
source to share
It just always has a 2px border, but it can be transparent if it doesn't hover.
li a img {
border: 2px solid transparent;
}
li a:focus img,
li a:hover img {
border-color: blue;
}
I like to do this over field manipulation because sometimes you might need margin as well. I would rather use margin for what it is supposed to be used for, rather than flipping margin and margins, and border and border. Seems clean in my opinion.
Working example:
li a img {
border: 2px solid transparent;
}
li a:focus img,
li a:hover img {
border-color: blue;
}
ul {
list-style: none;
}
li {
display: inline-block;
margin: 5px;
}
<ul id="image_list">
<li><a href="h1.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
<li><a href="h2.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
<li><a href="h3.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
<li><a href="h4.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
<li><a href="h5.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
<li><a href="h6.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
</ul>
source to share
Set the default transparent border:
li a img {
border: 2px solid transparent;
}
li a:focus img {
border: 2px solid blue;
}
li a:hover img {
border: 2px solid blue;
}
<ul id="image_list">
<li><a href="h1.jpg"><img alt="" src="http://placehold.it/350x150&text=1"></a></li>
<li><a href="h2.jpg"><img alt="" src="http://placehold.it/350x150&text=2"></a></li>
<li><a href="h3.jpg"><img alt="" src="http://placehold.it/350x150&text=3"></a></li>
<li><a href="h4.jpg"><img alt="" src="http://placehold.it/350x150&text=4"></a></li>
<li><a href="h5.jpg"><img alt="" src="http://placehold.it/350x150&text=5"></a></li>
<li><a href="h6.jpg"><img alt="" src="http://placehold.it/350x150&text=6"></a></li>
</ul>
source to share
Here's the best info I've ever seen on this topic. http://css-tricks.com/image-rollover-borders-that-do-not-change-layout/
A must read the resource on this issue.
source to share