Machen div bleiben in Position nach Hover

Question

Ich versuche, das div-Tag in Position zu bleiben, nachdem das Bild schweben. Ab sofort bewegt sich das div nach rechts, wenn ich das Bild schwebe. Ich habe versucht, feste Position und absolut, aber kein Glück. Hier ist der HTML-Code:

<div> 
<button class="buttonTest"></button> 
</div> 

In CSS:

.buttonTest{ 
    background-image: url('http://hd-wall-papers.com/images/wallpapers/random-  image/random-image-16.jpg'); 
    width:150px; 
    height:150px; 

} 

div { 
    border-style: solid; 
    height:auto; 
    width:150px; 
} 

div{ 
    transition: all .2s ease-in-out; 
} 

div:hover{ 
    border-width:75px; 
    transform: scale(.5); 
} 

In codepen: https://codepen.io/dxs6040/pen/gmPgzz/

Answer 1

Verwenden Box-Sizing: border-Box und ein paar Änderungen. Ist das das gewünschte Verhalten?

.buttonTest{ 
 
background-image: url('http://hd-wall-papers.com/images/wallpapers/random-image/random-image-16.jpg'); 
 
    width:100%; 
 
    height:100%; 
 

 
} 
 

 

 
div { 
 
    border-style: solid; 
 
    height:150px; 
 
    width:150px; 
 
    transition: all .2s ease-in-out; 
 
    box-sizing: border-box; 
 
} 
 

 
div:hover{ 
 
    border-width:15px; 
 
    transform: scale(.80); 
 
}

<div> 
 
<button class="buttonTest"></button> 
 
</div> 
 
<div> 
 
<button class="buttonTest"></button> 
 
</div>