Border Radius Error only on Safari Browser - css

Question

I am trying to make a node that can zoom its picture when hovered upon. Everything works fine on Chrome and Mozilla. However, for some reason Safari gets buggy every time the image is on hover. The border radius disappears when hovered into a sharp edge and reappears when un-hovered. Here is an example: FIDDLE
.img-zoom {
top: 0;
left: 0;
margin: 0;
display: block;
width: 100%;
height: 60%;
position: relative;
overflow: hidden;
}
.img-zoom img {
-webkit-transform: scale(1.04);
-ms-transform: scale(1.04);
transform: scale(1.04);
transition: all 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.img-zoom img:hover {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.blogDesc {
background-color: whitesmoke;
width: 100%;
height: 40%;
}
.blogContent {
width: 200px;
height: 200px;
word-wrap: break-word;
border-radius:25px;
overflow: hidden;
display:inline-block;
margin:10px;
}
.blogTitle {
font-weight: bold;
font-family: "Courier New";
text-align: center;
padding: 10px;
}
.blogText {
-webkit-column-width: 150px;
column-width: 150px;
height: 100%;
margin-left: 10px;
margin-right: 10px;
}
.blogAlign{
text-align:center;
}
<section class="blogAlign">
<div class="blogContent">
<div class="img-zoom"><img src="https://kbob.github.io/images/sample-3.jpg" alt="" title=""></div>
<div class="blogDesc">
<div class="blogTitle">
My Multimedia Agency Tool
</div>
<div class="blogText">
BBLALBLABLALBALBLBALBALBALBLABLABLABLABLABLALBLABLABLABLALBALBLABLABLABLABLALBLABBBLALBLABLALBALBLBALBALBALBLABLABLABLABLABLALBLABLABLABLALBALBLABLABLABLABLALBLABBBLALBLABLALBALBLBALBALBALBLABLABLABLABLABLALBLABLABLABLALBALBLABLABLABLABLALBLABBBLALBLABLALBALBLBALBALBALBLABLABLABLABLABLALBLABLABLABLALBALBLABLABLABLABLALBLAB
</div>
</div>
</div>
<div class="blogContent">
<div class="img-zoom"><img src="https://kbob.github.io/images/sample-3.jpg" alt="" title=""></div>
<div class="blogDesc">
<div class="blogTitle">
My Multimedia Agency Tool
</div>
<div class="blogText">
BBLALBLABLALBALBLBALBALBALBLABLABLABLABLABLALBLABLABLABLALBALBLABLABLABLABLALBLABBBLALBLABLALBALBLBALBALBALBLABLABLABLABLABLALBLABLABLABLALBALBLABLABLABLABLALBLABBBLALBLABLALBALBLBALBALBALBLABLABLABLABLABLALBLABLABLABLALBALBLABLABLABLABLALBLABBBLALBLABLALBALBLBALBALBALBLABLABLABLABLABLALBLABLABLABLALBALBLABLABLABLABLALBLAB
</div>
</div>
</div>
<div class="blogContent">
<div class="img-zoom"><img src="https://kbob.github.io/images/sample-3.jpg" alt="" title="" class="picturez"></div>
<div class="blogDesc">
<div class="blogTitle">
My Multimedia Agency Tool
</div>
<div class="blogText">
BBLALBLABLALBALBLBALBALBALBLABLABLABLABLABLALBLABLABLABLALBALBLABLABLABLABLALBLABBBLALBLABLALBALBLBALBALBALBLABLABLABLABLABLALBLABLABLABLALBALBLABLABLABLABLALBLABBBLALBLABLALBALBLBALBALBALBLABLABLABLABLABLALBLABLABLABLALBALBLABLABLABLABLALBLABBBLALBLABLALBALBLBALBALBALBLABLABLABLABLABLALBLABLABLABLALBALBLABLABLABLABLALBLAB
</div>
</div>
</div>
</section>
Does anyone know how to fix this? Thanks in advance.

Answer 1

<div class="activity_rounded"><img src="http://placehold.it/100" /></div>
.activity_rounded {
display: inline-block;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-khtml-border-radius: 50%;
border: 3px solid #fff;
}
.activity_rounded img {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-khtml-border-radius: 50%;
vertical-align: middle;
}
it should work properly.