Dotted Effect Over An Image

Hi Team

I want to incorporate a dotted effect over imagery throughout the site on this particular project. Please see screenshot attached.

Please could you let me know the potentially best method with my limited coding experience. I was thinking of initially bringing in very small SVG or series of dots repeating them into a background (Tiling) them. Would this way be recommended?

Thank you for your time.

Regards, Saff

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

I created this demo using the image element. You can’t add a background to the image element so you need a couple of more elements. This will also enable you to add interactions specific to the dots. Note the position settings for each element for your learning.

You could do this with a div with both the image and dots as background images on that div. I prefer the demo method.

https://preview.webflow.com/preview/dots-fc6445?utm_medium=preview_link&utm_source=designer&utm_content=dots-fc6445&preview=e39eb06e0b082f2c443301aeabfa8732&mode=preview

Thank you for your help. That is a great help :slight_smile:

1 Like