Responsive Image positioning with CSS calc()
.section-types .type-info .type-image-wrapper {
position: absolute;
left: calc(100 * 48%/564);
width: calc(100 * 280%/564);
top: calc(100 * 84%/535);
border-radius: 35px;
overflow: hidden;
}
for better understanding I've attached the codepen link for this
https://codepen.io/d-shan/pen/GReYOpz2 Replies
Not really sure what you want to achieve, but i think it is way easier if you make both images the same size and stack them on top of eachoter
you can do it with all sorts of calcs, object-positions and stuff, but why the hassle
Thanks for the response @MarkBoots , Well this was not something I did, I'm searching for this because it's bit new to me, and I think this method could be useful to adopt to any element. Like pseudo elements too. how ever I appreciate your response, I'll try that too.