Pop up on hover? And

Design help Animations & Interactions
1

Hi! I started out recreating the freelance tv site that Nelson was showing on Youtube. I wanted to go a step further and recreate the entire site, including a few pieces he didn’t have time to go over. One area was a particular problem. on the site.

When you hover over the ‘follow along’ text, a pop up appears, kinda like a lightbox. I’m not quite sure how I can achieve this.

45
452880×1800 624 KB

Also, every time I was adding text blocks or headings, this purple/blue line showed up under the text. This wasn’t an underline or border. I tried everything. Does anyone know anything about this? You’ll see this on most of the text on my published page.

Here is my published link: http://freelancetv-sample.webflow.io/

2

Hi, do you have the ‘Read Only’ link so we all can view the elements? The popup is just a div transform, you can easily do this :slight_smile:

The underlines are usually coming from a ‘Link Block and/or Text Link’. Did you check these already?

3

If I’m understanding your question properly, there are a few ways to do with interactions. One way is to design the pop up as you want it, then set its display to none. Then, create a new interaction on the hover event of the element that should make the popup appear. For hover over, set the display to block (or inline-block depending on your needs), and make it invisible again on hover out. If you need the popup to move depending on which element is being hovered over, you can also do this in the hover over step.

As for the underline-- is the parent element a link block or button or other link? If so, you need to take the underline property off of that one (the parent)

As @garymichael1313 said, if you could send a share link that would be very helpful!

4

Hi Gary,

It was the linkbox. Thanks a lot for that. It was annoying me.

Here’s the Read Only link.

The 3 doubts I have the pop up:

  1. Is it set on Absolute positioning?
  2. The pop has a downward arrow, pointing at the text I hover on. Is that 2 separate div blocks I need to add to get this shape?
  3. When I hover on the pop up, the background darkens out like a lightbox makes it. How do I achieve this?
5

Okay you want the popup to show on the “follow along” link in the hero header paragraph?

6

Hi gokul.ullas!

No1: About the position, if you scroll your mouse down and up, the box still stay in place which means they are using ‘fixed’ as position.

No.2: Actually it is a single div with the border! this is the concept of div triangle: CSS Triangle | CSS-Tricks - CSS-Tricks

I just tried on Webflow itself, and here is how it build:

  1. Make single Div
  2. Set Border to 16px
  3. Set left, right, bottom color to: transparent
  4. On the Div layout, set width to 16px
  5. DONE! you have a downward triangle!

No3. this requires interaction that affects opacity, So basically, the dark area is a fix div that cover entire pages [with Width: 100VW and Height: 100VH]and have z-index higher than other element and triggered when those boxes come out.

I hope this will answer your question.