html tutorial - How to apply border to an element on mouse hover without affecting the layout in CSS - html5 - html code - html form
Answer: Use the negative CSS margin
- In hover mouse move the elements from its original position.
- By using negative Css Margin value you can do without affecting the other elements.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Add CSS Border on Hover without Moving the Elements</title>
<style type="text/css">
ul {
padding: 0;
list-style: dotted;
}
ul li {
float: left;
margin: 15px;
}
ul li a, ul li a img {
display: block;
}
ul li a:hover {
border: 5px solid #333333;
overflow: hidden;
}
ul li a:hover img{
margin: -5px;
}
</style>
</head>
<body>
<ul>
<li><a href="#"><img src="club.jpg" alt="Club Card"></a></li>
<li><a href="#"><img src="diamond.jpg" alt="Diamond Card"></a></li>
<li><a href="#"><img src="spade.jpg" alt="Spade Card"></a></li>
<li><a href="#"><img src="heart.jpg" alt="Heart Card"></a></li>
</ul>
</body>
</html>