Scratching my head over this one

I’m supposed to duplicate this with the knowledge of html and CSS only.
My problem here is that how to give this semi transparent frame at the side where I can still see the background image partially?

I was trying to put 4 div elements at each side having there rgba set to (0,0,0, 0.5), but I don’t think I can get the inner part’s border perfectly.

Something tells me that there’s an easier way to solve this. Help needed :confused:

Image on the body, same image in the same position on the card. [Almost always] it is easier to fake things rather than painstakingly try to recreate them the same way. This isn’t a great design – it looks nice but it doesn’t really take into account the constraints of CSS layout. But you can fake how it works by having the two identical images directly on top of each other, your only issue then is getting the positioning correct.

1 Like

Thank you @DanCouper, I have done it!!

1 Like