Archived topic

Icon/color overlay on image: hover

5 replies · Started by fabien on September 4, 2019

Viewing posts 1–6 of 6

September 4, 2019 at 6:39 pm #1001319

Is there a built-in functionality on GP Premium to recreate an effect similar to this? https://www.w3schools.com/howto/howto_css_image_overlay_icon.asp

I have small youtube screenshots on a page that link to Youtube videos. I would like a semi-transparent white fade + Youtube icon on hover to indicate they link to external content.

I couldn't get the tutorial above to work... I have provided a link to a similar effect below.

September 5, 2019 at 4:54 am #1001602

Hi there,

can you link us to your Site so we can see what it would involve

September 5, 2019 at 3:51 pm #1002155

I edited the hidden link in the original post. Thanks!

September 5, 2019 at 4:39 pm #1002177

Hi there,

This should work with the first one, as you've added a youtube-over class to the container. That class doesn't seem to exist in the other containers:

.youtube-over a:after {
    content: "";
    background: #fff url(https://YOURURLHERE.com/wp-content/uploads/youtube.svg);
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    transition: opacity 500ms ease;
}

.youtube-over a:hover:after {
    opacity: 1;
}

September 5, 2019 at 5:24 pm #1002191

fantastic, thank you!

September 6, 2019 at 9:34 am #1002737

You're welcome :)

This archived topic is closed to new replies.

Start building better websites today.