I have successfully set a hover and the effect works in principle. Unfortunately, however, the div moves down a bit as a result.
How do I make the div stay in the same place and extend equally to all sides without moving the div down a bit?
Here is the code I have used so far.
html, body {
padding: 0;
color: #000;
font-size:14px;
background-color:#e8e8e8;
vertical-align: middle;
font-family:arial,sans-serif,verdana
}
div#bg1 {
display: inline-block;
width: 100%;
margin: 50px 0px;
text-align: center;
}
.div1{
display: inline-block;
width: 30%;
background-color: #FFF;
color: #000;
font-size: 14px;
font-weight: bold;
border-radius: 15px;
border: 15px solid transparent;
}
.div1:hover{
display: inline-block;
width: 30%;
background-color: #FFF;
color: #000;
font-size: 14px;
font-weight: bold;
padding: 5px;
border-radius: 15px;
cursor: pointer;
transition: 0.15s;
}<html>
<head>
</head>
<body>
<div id='bg1'>
<div class="div1" align="center">This is a test</div>
</div>
</body>
</html>As you can see, the top line stays the same, which moves you the entire div down.
Where do I have a thinking error?
>Solution :
add a minus margin to hover state:
html, body {
padding: 0;
color: #000;
font-size:14px;
background-color:#e8e8e8;
vertical-align: middle;
font-family:arial,sans-serif,verdana
}
div#bg1 {
display: inline-block;
width: 100%;
margin: 50px 0px;
text-align: center;
}
.div1{
display: inline-block;
width: 30%;
background-color: #FFF;
color: #000;
font-size: 14px;
font-weight: bold;
border-radius: 15px;
border: 15px solid transparent;
}
.div1:hover{
display: inline-block;
width: 30%;
background-color: #FFF;
color: #000;
font-size: 14px;
font-weight: bold;
padding: 5px;
margin: -5px;
border-radius: 15px;
cursor: pointer;
transition: 0.15s;
}<html>
<head>
</head>
<body>
<div id='bg1'>
<div class="div1" align="center">This is a test</div>
</div>
</body>
</html>