3

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>
Michael Walter
  • 1,427
  • 12
  • 28
  • 2
    Seems like a Chrome issue; the "Strange" piece works fine in both Firefox and IE 11, but fails on Chrome. – Alex Shesterov Oct 30 '18 at 16:15
  • If you want an explanation, see here: https://stackoverflow.com/questions/31693219/issue-while-using-transitions-opacity-change-overflow-hidden?answertab=votes#tab-top As a solution: add a transform to your `hop_circle_img` that doesn't do anything - e.g. `transform: scale(1);` – Krxldfx Oct 30 '18 at 16:37

1 Answers1

0

This is a bug in Chrome. Add a (useless) transform to hop_circle_img to work around it. For example:

transform: translateX(0);

or

transform: translateY(0);

or

transform: scale(1);

Here are a couple of related bugs reported for Chromium:

Jake Reece
  • 1,140
  • 1
  • 12
  • 23