Streaming live at 10am (PST)

Need help with hover options on an image


#1

Hi there,

I have altered the hover attributes on my images here http://prestige-events.webflow.com/prestige-events-magazine just to expand a bit.

I would like text to appear over the image in a small box similar to this page http://berkeleypr.co.uk/storytellers/ when hovered over. Is there a simple way of doing this in Webflow?

Thnaks

Sam


#2

There is no way to make an element follow the cursor in Webflow at the moment. It's still possible with Javascript programming.

You can make the text, or anything, appear when the cursor hovers the image though, with interactions. Check the example 5 on this page http://interactions.webflow.com/


#3

Thanks for the link Vincent. All I want is a word to pop up over the image when hovered over. I can't work out how to do that with interactions. Do you think you could do one for me to demonstrate? For example, the first image on the "Prestige events magazine" page needs to say BLOG when hovered over. Is this possible?

https://webflow.com/design/prestige-events?preview=48fd40a2fe6fbbaa1110ae0112aeb1f5


#4

1 set your link block to position:relative
2 drag a div inside it, set it to position:absolute, 100% height and width and click the upper left corner position button
3 put a text in in, center horizontal, center vertical (position:rzlative then down 50% then translate -50%)
4 add a bg
5 set the div to opacity 0%
6 switch to hover state
7 opacity 100%
test

watch this https://v.usetapes.com/079PzhiqG1


#5

So helpful, thank you so much for that.
Much appreciated

Sam


#6

There is something I haven't explained and is quite important.

The fact you have to set the link block to position:relative (which has no effect at all on this block) is to allow the poition:absolute of the inner div to work. The rule here is the an absolute positionned element is placed relatively of its closest placed parent. So in order to place this div relatively (on top of in our example) the link block, we need the link block to have a position declared. So we set it to relative and touch nothing else. If we don't do that, the inner div is going to place itself somewhere else on the page, on top of one of its placed parents.


#7