Streaming live at 10am (PST)

Overlay/Hover Interaction Question!


#1

Hi all,

I've been stumped on this problem for days (and it's probably something simple but I can't for the life of me figure it out).

Here's my preview link: https://preview.webflow.com/preview/a2g?preview=1a093ce53bf1e8a899f9ae11b1559db6

Please navigate to Gap | #DressNormal | A2G

Scroll to this grid portion of it:

So currently there's a hover change but ideally I wanted to hover over it and get details on these Instagram users, like their handles and location with an orange overlay (accent color). The grid is nicely laid out and very nicely responsive, however, I realized I may needed to use divs for this situation. I tried using divs but the div wouldn't size right, nor would it be responsive.

So with the suggestion of Dave from Webflow, I tried giving the parent div a relative position, then placed the div for the overlay inside the parent div and give that same div a position of absolute with a full cover and a z-index that is 1 layer higher than the content I wanted to display. However, this solution didn't allow me to make a bunch of boxes aligned with each other.

My second problem is a similar problem with the section directly under it named Creative Assets:

Again, I was able to lay it out all nice and responsive, but this time I'm linking these images to a PDF viewer. I tried using a link block this time (what is happening underneath) but when I click the eye for preview, it doesn't resize. Don't need hover this time, but I would want to make sure it resizes and links out to the right place.

*Bonus Question: Anyone have any tips to embed a PDF viewer that doesn't have branding (Issuu would be a last resort, and free would be ideal)? Example of it here: http://a2g.la/dress-normal-project/ I tried reading the code but can't figure it out. *

Thank you!!


#2

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