Need help with CMS div overlay

Design help General
1

Hello,

I’m currently making my 1st CMS website and looking for some help.

I have my blog posts (Latest work section) but I want to add so when you hover over the blog post div a box a black overlay will come up with a button in the middle of the image saying “View”

How could I achieve this?

Thanks in advance,

https://preview.webflow.com/preview/smjphotography?preview=b3a82f41cff9ac29ed8eb143c7d70c6d

2

That’s the ABC of Webflow.

You’ll build your dunamic list showing your posts. A grid of posts teasers. Once you’ve set that, add a positon:absolute black div on top of the teaser, in the dynamic list cell. Then the button on top of it. Now you have your “final”, or hovered state.

Proceed to hide that div on button, make it 0% opacity then display none. Now create an interaction on the post teaser itself. Say that on hover of the teaser, if affects the black div, and passes it to display:box and opacity 100%

That’s the obvious method you should follow.

3

@vincent

Thanks for the reply, I added thumbnail overlay div, and made an interaction to thumbnail div for when I hover over it it will effect thumbnail overlay.

But it seems to always display blank…

Thanks

Matt

4

Is it on the mywork section?

I can’t see an overlay div and button on those cells… help me?

Ok I see the overlay, not the button. I’m going to add a button and make a screencast on how I do it.

5

Here we go Google Chrome – Tapes

Note that you need to add a z-index value to the overlay div, I think it appeared but it was under other things. I haven’t looked at your interaction, I made mine from scratch.

6

@vincent

You are the man thank you!

Is there a way to stop the grey appearing over the text?

7

Any way you can make the div overlay not to cover the text to begin with…

8

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.