I'm having trouble with positioning and cropping an image correctly on my website. I want it to look like this (hero-section):
The entire project is based on a grid layout.
I need a circular image that is larger than the container, positioned to the left, and cropped at the top and bottom. It should also be responsive.
I've tried placing the image in a wrapper, setting the wrapper's position to relative, and applying overflow hidden. However, it doesn't seem to work as intended.
.hero-image-wrapper {
border: 0.3rem solid #968273;
border-radius: 50%;
overflow: hidden;
width: 100%;
height: 150%;
position: relative;
overflow: hidden;
top: -25%;
left: -10%;
}
.hero-image {
transform: scaleX(-1);
border-radius: 50%;
width: 100%;
height: 100%;
}<div class="hero-image-wrapper">
<img class="hero-image" src="../images/pexels-ekaterina-bolovtsova-6976906-mobile.jpg">
</div>Thank you for any assistance you can provide!