I have 3 circular divs that resize slightly when you hover over them, but this resizing also occurs if you hover near them. Additionally, I want them to be centered with some responsive spacing.
Here is a live demo: demo
Below is my code:
<div id="kruhobal">
<div class="kruh" id="kruh1"></div>
<div class="kruh" id="kruh2"></div>
<div class="kruh" id="kruh3"></div>
</div>
CSS:
#kruhobal
{
width:100%;
}
@media only screen and (max-width:111100px)
{
.kruh
{
display: inline-block;
transition: transform 1.0s ease;
}
.kruh:before
{
border-radius:50%;
content: '';
display: inline-block;
padding-bottom: 0vw;
width: 13vw;
height: 13vw;
}
.kruh:hover
{
transform: scale(1.15);
}
#kruh1
{
}
#kruh1:before
{
background:red;
background-size:cover;
}
#kruh2:before
{
background:red;
background-size:cover;
}
#kruh3:before
{
background:red;
background-size:cover;
}