How to fix z-index for img in parent div - css

Question

I have the following HTML:
<div class="caller shadow-circle-lg"><img src="public/img/example-photo.png"></div>
And CSS:
.shadow-circle-lg {
border-radius: 50%;
-webkit-box-shadow: 0px 2px 2px rgba(50, 50, 50, 0.33), inset 0px 2px 2px rgba(50, 50, 50, 0.33);
-moz-box-shadow: 0px 2px 2px rgba(50, 50, 50, 0.33), inset 0px 2px 2px rgba(50, 50, 50, 0.33);
box-shadow: 0px 2px 2px rgba(50, 50, 50, 0.33), inset 0px 2px 2px rgba(50, 50, 50, 0.33);
border: 8px solid white;
}
div.caller {
z-index: 200;
}
.caller > img {
z-index: 100;
}
Why is the IMG element still rendering over the div border, even though it has a lower z-index (yes, I have checked the DOM in Chrome).
Also, is there any way I can force the div border radius to crop the image?
Please note, I don't want to apply any classes to the IMG itself.
Thanks

Answer 1

You can force the border radius to crop by setting overflow: hidden; on your parent element (in .shadow-circle-lg)
It is important to note that z-index property ONLY works on positioned elements (like position: absolute or position: relative. Try adding this property to the <div> and <img> element(s).
Final CSS markup:
.shadow-circle-lg {
border-radius: 50%;
-webkit-box-shadow: 0px 2px 2px rgba(50, 50, 50, 0.33), inset 0px 2px 2px rgba(50, 50, 50, 0.33);
-moz-box-shadow: 0px 2px 2px rgba(50, 50, 50, 0.33), inset 0px 2px 2px rgba(50, 50, 50, 0.33);
box-shadow: 0px 2px 2px rgba(50, 50, 50, 0.33), inset 0px 2px 2px rgba(50, 50, 50, 0.33);
border: 8px solid white;
overflow: hidden; /* "crop" by hiding overflow content */
}
div.caller {
z-index: 200;
position: relative; /* position so z-index is recognized */
}
.caller > img {
z-index: 100;
position: relative; /* position so z-index is recognized */
}