@amalkarim
Posted
Hi Octávio,
Generally, you will need the image parent's element of the image has this property overflow: hidden;. But in this challenge, it's quite tricky. Because there are two images that shouldn't go beyond card boundaries, and there is an image that should go beyond boundaries (the red box image).
To make this work, we need to create an element inside <section class="faq__container-destop"> that has position: absolute; and the same width and height as .faq__container-desktop itself, but with overflow: hidden;, then we place two images inside it. And we place the red box image outside it to let it go beyond the boundaries. Don't forget to give .faq__container-desktop position: relative;
If you still have any problem, feel free to reply this comment
Marked as helpful
@oc-garcia
Posted
@amalkarim thanks Amal! I created a overflow-container inside the faq__header but the desktop and shadow image desappeared behind the card. Not sure what I am doing wrong. If you could take a second look it would be amazing.
@Dany-GitHub
Posted
@oc-garcia I checked your solution the issue is coming from width and height you need to give .faq__header and overflow container as well then modify the left and tap for each image
@amalkarim
Posted
@oc-garcia
Place .overflow-container outside .faq__header. Like this:
<section class="faq__container-destop">
<div class="overflow-container">
....
</div>
<div class="faq__header">
....
</div>
...
</div>
Then give it full width and height of its parent (.faq__container-destop)
overflow-container {
top: 0;
left: 0;
height: 100%;
width: 100%;
}
After that:
- You will need to adjust the position of two images inside
.overflow-container. - And give
faq__photo-boxbiggerz-indexthan.overflow-container. Or, maybe just removez-indexproperty from.overflow-containerbecause I think it's unnecessary.
