I want to use a zoom via css to enlarge an image within a container, which has a border-radius of 50 % to simulate a round circle.
I was wondering why my solution did not work and found this answer here: picture with border-radius 50% and transform(scale)
I copied the code and applied it to mine, but the the behavior still exists.
Does anyone know why the image became a rectangle during the transition when it is in a container with a column-count of 2?
.col {
column-count: 2;
}
img{
width: 100px;
height: 100px;
}
.hopp_circle_img {
width: 100px !important;
height: 100px !important;
max-width: 100% !important;
max-height: 100% !important;
overflow: hidden;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
.hopp_circle_img img {
transition: all 0.8s;
-moz-transition: all 0.8s;
-webkit-transition: all 0.8s;
-o-transition: all 0.8s;
-ms-transition: all 0.8s;
}
.hopp_circle_img img:hover {
display: block;
z-index: 100;
transform: scale(1.25);
-moz-transform: scale(1.25);
-webkit-transform: scale(1.25);
-o-transform: scale(1.25);
-ms-transform: scale(1.25);
}Strange:<br />
<div class="col">
<div class="hopp_circle_img">
<img src="https://images.pexels.com/photos/325185/pexels-photo-325185.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="" />
</div>
</div>
Works like charm:<br />
<div class="hopp_circle_img">
<img src="https://images.pexels.com/photos/325185/pexels-photo-325185.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="" />
</div>