Card Design to Unveil Links on Hover

How To
1

How can I unveil those links when I hover on a card? See UI design below.

image
image785×647 56.7 KB

2

Hello!

You can follow these steps:

  1. Create a div inside the card.
  2. Place inside the div all the content (New York, Paris, UAE links) that you don’t want to show until being hovered
  3. Then, hide this div and give it a higher z-index.
  4. Go to the card and style the :hover state so the hidden div becomes visible.

The simplified HTML structure would go like this:

<div class="service-card">
<p>Hotels</p>
<div class="service-card__hover">
<p>New York</p>
<p>Paris</p>
<p>UAE</p>
</div>
</div>

And then, you’d style the Card like this:

.service-card__hover { display: none; opacity: 0; }
.service-card:hover .service-card__hover { display: flex; opacity: 1; }

1 Like
3

Not working.

https://247.projecth.xyz/homepage

@timmse You can help look into this too. I have a video record for it too - Jam

4

Looks Interesting

I can make it as a template, are you usign Core Framework or ACSS?

Let me know and I will have it available later today.

5

I don’t use any of the two.

6

Check this Room Boxes – Core Framework Templates

Here is the code: WeTransfer - Send Large Files & Share Photos Online - Up to 2GB Free

1 Like
7

Hi,

Thanks it worked.

I added hover color to the block, it worked too but I can’t find my way to edit the transition effect.
Do I need an addon to edit the hover background color transition effect?

8

Not really, you just need some knowledge about how transitions work in css.

If you have an example of how it should work, I could make the css for you.

9

Hmm,

So I need to write the CSS?

Did you check the page and see the current hover background color and transition? I wanted to make it swipe gently from left (the transition effect).

You may check this - https://codepen.io/Abbas-Tough/pen/VwRxoLb

10

Got it, I will make some keyframes for you

11

@timmse I would still like to know if it’s possible via setting hover pseudo classes.