It's just hard to write (Please look at the photo)

Community resources General
1

Hi everyone,
Simply I got stuck in my own design and don’t know how to achieve it with webflow but I’m sure there should be an easy way to do this. I’m just trying for 24 hours and It’s time to ask for help please!

on my home page I will have a collection list. This collection list will be bidden to CMS blog posts but with an effect I created. Please take a look:

Screenshot 2021-04-04 at 03.18.53
Screenshot 2021-04-04 at 03.18.532442×1174 383 KB

I need to find a way so I can bide the background mage (with less brightness filter) and then add the foreground (Cropped photo but with the same size) on the background. I tried div blocks so many time and object fit but I can’t figure out how to match the size of two images (the background and foreground) the foreground will have normal brightness to make this effect. is this possible in webflow? please

https://preview.webflow.com/preview/curatedshorts?utm_medium=preview_link&utm_source=designer&utm_content=curatedshorts&preview=7510372ad5810904a9c0b3ef20a67053&pageId=6068c827b9a18514e8e01a6f&mode=preview

2

Hi @Roozbeh_Misaghi nice problem to solve. I was playing a bit with mix-blend-mode. I wasn’t able to create exact effect but there are some possibilities and I come up with this.

CleanShot 2021-04-05 at 00.12.28
CleanShot 2021-04-05 at 00.12.281728×1158 352 KB

PHOTO: janko-ferlic-keHcRnWthRQ-unsplash

It is opposite effect but hopefully someone will figure out how can be done punch through black. :thinking:

RO Link

Live example

3

This is great an exactly it I just need to change the brightness instead of the colour as you did. Would you please let me know who did you do this?

4

look into RO example. There is everything. But like I’ve said it is not perfect and it has some limitation but maybe there is another approach.

5

Thank you Stan got it. Would you please keep the RO for few days I’m trying to get it and very nice solution with grids and the cut! I will do trial and error until I get it!

6

no problem usually I keep examples accessible about 1-2 months and after I keep them in repository for my use much longer :wink:

7

Great then :slight_smile:

Thanks for the help,

1 Like
8

What about utilizing a grid positioned over top of the section, with 8 of the nine “slices” using a transparent black div? I threw together a quick project illustrating the idea that you can check out below:

https://testingtester.webflow.io/masked-section

https://preview.webflow.com/preview/testingtester?utm_medium=preview_link&utm_source=designer&utm_content=testingtester&preview=fe69cc0009193a8ec56ed05f9c6a9199&pageId=606a544b2bd9d54279641525&mode=preview

2 Likes
9

Didn’t thing about that, simple and effective :slight_smile: Maybe It can be simplified on 4 masks (top - sides-bottom)

EDIT: if you don’t mind I have add your approach on second page of first example.

10

This is great thanks. I am testing it now :raised_hands:t2:

11

@Roozbeh_Misaghi you should mark @mikeyevin example as solution as is perfect for what you need. :wink:

12

Thanks a lot, everyone. Really great tips here.

My final question is that, do you think the same approach can happen over a CMS collection so I can reference the photos and text from it?

13

Hi @Roozbeh_Misaghi did you tried it? If not just do so :wink:

14

Just did. Trying it both now. I can see your project as well it sit very well