@brasspetals
Posted
Hi, Kristine!
To match the design, remove the opacity and z-index from your color overlay, and add mix-blend-mode: multiply and opacity to the image instead. An opacity around .85 seems to work pretty well. 👍
@sn-tin
Posted
@brasspetals The color-overlay is a div so removing the z-index would add another item on top of the card so I just left it as is and added the mix-blend-mode and changed the opacity to .85. It looks better now. Thank you so much for this! 😊
@brasspetals
Posted
@sn-tin Glad it worked! The color works better beneath the image if you want to achieve the slight opacity effect in the design, hence my suggestion to remove the z-index. You could actually remove the color overlay div completely and set the purple color on your header-image div as the background color. 👍
@sn-tin
Posted
@brasspetals Ohhh 😲 okay, i’ll do that. Thank you again!
