I'm experimenting with creating a hover effect on a div that scales the entire element slightly. It's working well, but I noticed that when I insert an image inside the div, it shrinks instead of scaling along with its parent.
To better demonstrate the issue, I've set up a fiddle: Check it out
<main>
<div class=" w-100 row">
<div class="col-6">
<div class="base square clickable">
<div class="content">
<div class="d-flex align-items-center justify-content-around flex-column h-100">
<img src="test.jpg" alt="Company" width="50%">
<h4 class="mt-2">Company Name</h4>
<h5 class="mt-2">Zusatz info</h5>
</div>
</div>
</div>
</div>
</div>
</main>
.base {
background-color: grey;
border-radius: 30px;
}
.square {
padding-bottom: 100%;
margin: 10px;
}
.content {
position: absolute;
top: 15px;
bottom: 15px;
left: 15px;
right: 15px;
text-align: center;
}
.base img {
border-radius: 50%;
height: auto;
}
.base.clickable {
transition: transform 300ms;
}
.base.clickable:hover {
cursor: pointer;
transform: scale(1.05);
}
Can anyone figure out why the image isn't scaling properly in this scenario?