I'm having trouble showcasing blog posts with an image.
Currently, I am utilizing card-columns from Bootstrap 4, and when the user hovers over the image, it scales up.
The issue arises when the transition occurs, as my border radius resets to default and then back to 10px. (Check the top border during the hover effect)
If you could take a look at my fiddle: https://jsfiddle.net/feifles/93w7ryko/3/
body {
background-color: green;
padding: 50px;
}
.card {
border-radius: 10px;
border: 0;
}
.card img {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.card-columns {
background-color: green;
}
.zoom {
overflow: hidden;
}
.zoom img {
max-width: 100%;
-moz-transition: all 0.7s;
-webkit-transition: all 0.7s;
position: relative;
transition: all 0.7s;
}
.zoom:hover img,
.zoom:focus img {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="card-columns">
<div class="card zoom">
<img src="https://cdn1.thr.com/sites/default/files/imagecache/scale_crop_768_433/2018/02/star_trek_tv_spock_3_copy_-_h_2018.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title that wraps to a new line</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<div class="card zoom">
<img src="https://cdn1.thr.com/sites/default/files/imagecache/scale_crop_768_433/2018/02/star_trek_tv_spock_3_copy_-_h_2018.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title that wraps to a new line</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<div class="card zoom">
<img src="https://cdn1.thr.com/sites/default/files/imagecache/scale_crop_768_433/2018/02/star_trek_tv_spock_3_copy_-_h_2018.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title that wraps to a new line</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
</div>The bug or issue seems to be occurring only on Chrome