Streaming live at 10am (PST)

Div Content on Rollover


#1

Can someone please help me work out how to layout and style the following:

I have 3 Columns, each will be filled with an image of an attraction, when the user hovers over one of these columns I want a div with the name of the category and some text to slide up overlaying the bottom third of the image.

How is it I do this with Div's and Div overlays? I've been trying it how I would do it in my head but it's not been working and other tutorials don't seem to be helping or the links are dead.

Thanks in advance!


#2

Hello @GotoTaylor, could you give us more details, please?

1)

What actually you tried to do and how you imagine it?

2)

What tutorials you could not open?

3) Could you provide read-only link to your project, so it will be easier to help you to create effect that you want? Guidance you can find here: http://forum.webflow.com/t/how-to-enable-a-webflow-share-link/2573

Regards,
Anna


#3

Hi Sabanna,

I have scrapped it currently to continue with the rest of the layout as it was bugging me. I tried other ones that came up when I google searched and I wasn't getting anywhere- don't have all the links. All my searches had a 'click this link to see Demo' and all were error pages. They have maybe expired now.

Could you walk me through how to create it, all I need is a div with an image taking up the full background, when you hover over it another div slides up from the bottom with text in it.

What is best practice here? As I feel I kept putting in too many div's or missing something.


#4

Well, main steps are:

1) create div, give it position relative, overflow: hidden
2) put image inside the div OR give that 1st div background image
3) if you put image, give it position: absolute, aligning: full, height =100%
4) add 2nd div inside the 1st one (inside that div should be text that you want to show)
5) give it position:absolute and z-index higher than image
6) align it 100% down from the bottom
7) apply interaction on 1st div:
- trigger: hover
- affect different element: "2nd div class"
- hover over: move up 100%
- hover out: move to origin

Hope it helps,
Anna


Div overlay on top of percentage based image div?
#5

Hi Sabanna,

I have done this and it is just showing nothing of the div, inner div or the image and headings. What have I done wrong?
https://preview.webflow.com/preview/fun-city?preview=0a2134110c266a417eef007f7ee9fe62

That should be it read-only here. It is the section with the three columns under the "Our Attractions" header.

Thanks again.


#6

Give the 1st div some size. other way browser has no information how to show it to you.


#7

One more tip:
when you will create interaction, check option "limit to nested elements". It will prevent all other texts appear in the same time.


#8

How would I do that when I want it to be responsive- as you can see in the layout I want to have three in that row and I want them to size relative to the resolution, if I give them sizes when I shrink the browser the height remains the same and they stack over each other, I want them to shrink in proportion if possible?

Also thanks for all of the help!


#9

You can use VH or VW measurements. Just type it right after size (no space), press "enter" and Weflow app will accept it


#10

Using those it still seems to squash the image and I've also been told on these forums not to use VM if I want it more compatible. But I'm willing to if it works!


#11

Well, you need at least height. Width will be resized with columns


#12

Using just a VH and resizing window, it just squashes the image horizontally. It doesn't resize or adapt at all.


#13

Ok. make image position: relative and height: auto. Will be totally adaptive :smiley:


#14

Perfect! That worked thanks very much.


#15

:wink: Glad I could help


#16

Any advice on how I would overlay a radial gradient over the image? :wink: I just want it faded darker at the edges a little so the text is easier to read.


#17

You can add that gradient to the background of the inner div and make that div 100% of 1st div size (as you did with image before)


#18

Thanks. Having an issue with the slide up now, it looks perfect large but once it's scaled to a smaller resolution, the slide up isn't over the bottom of the image.


#19

Nevermind, it's all working now, I ended up removing the VW and it's adapting and staying relative to everything.


#20

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