Add Play Button on Mouseover - Support | Kriesi.at

Tagged: mouseover

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts
December 10, 2021 at 2:07 am #1332203

Jules
Participant

I’m adding thumbnails that point to YouTube videos. YouTube forces extra stuff on top of the thumbnails which I’m trying to avoid.
Here’s what I’m thinking:
1. Add the raw thumbnail
2. On mouseover, the play button image would appear
3. When you click on the image, it takes you to another page

On the Enfold template I’m using, I remember on the homepage it had “Recent Top Sellers” with images of men and women and they would change on mouseover – https://kriesi.at/themes/enfold-shop/

I never looked behind the scenes to see how they were doing this. Examples are deleted now.

Any suggestions would be greatly appreciated. Thank you

December 10, 2021 at 12:13 pm #1332298
Ismael
Moderator
Hey Julio,

Thank you for the inquiry.

You can actually use the Image element to open the video as an external link, just make sure to apply the “noLightbox” class name in the Advanced > Developer Settings > Custom CSS class field to prevent lightbox from opening. For the play button, you can try this css code.
```
.avia-image-container:hover .avia-image-overlay-wrap:before {
    content: 'Play Button Here';
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
    z-index: 1000;
    font-size: 20px;
    font-weight: bold;
    color: #ffffff;
}
```
Just replace the content value with an actual play button image or a font icon.

Best regards,
Ismael
December 10, 2021 at 9:11 pm #1332376

Jules
Participant

@Ismael,
Thank you for your response. I have a couple naïve questions:
1. I have placed the Image Element within a Color Section
2. I added the “noLightbox” class name in the Advanced > Developer Settings > Custom CSS class field
3. Silly Naive Question: Where do I add this CSS code?
4. content: ‘Play Button Here’; – Is this the full URL for the button (e.g. https://kingdomlearners.com/wp-content/uploads/2021/12/Play-Button-Mouseover-for-Thumbnails.png)?

Thanks so much for your help.

December 11, 2021 at 1:13 am #1332379
Jules
Participant
UPDATE: I have the Mouseover working, however, the play button is not clickable, but the image in the Image Element is clickable. How can I resolve this? Thank you
- This reply was modified 2 years, 11 months ago by Jules.
December 12, 2021 at 1:37 am #1332455

Mike
Moderator

Hi,
Thank you for the link to your site, instead of this rule:
.avia-image-container:hover .avia-image-overlay-wrap:before
try this rule:
.avia-image-container:hover .avia-image-overlay-wrap a.avia_image:before
it will please your imge inside the link so it is clickable.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

December 12, 2021 at 6:22 am #1332468

Jules
Participant

Mike & Ismael,
WORKS AS EXPECTED :)
THANK YOU SO VERY MUCH FOR YOUR HELP! IT IS GREATLY APPRECIATED!!!!
Julio

December 12, 2021 at 12:39 pm #1332478

Mike
Moderator

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike
Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘Add Play Button on Mouseover’ is closed to new replies.