Tagged: mouseover
-
AuthorPosts
-
December 10, 2021 at 2:07 am #1332203
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 pageOn 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 #1332298Hey 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,
IsmaelDecember 10, 2021 at 9:11 pm #1332376@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 #1332379UPDATE: 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 3 years ago by Jules.
December 12, 2021 at 1:37 am #1332455Hi,
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,
MikeDecember 12, 2021 at 6:22 am #1332468Mike & Ismael,
WORKS AS EXPECTED :)
THANK YOU SO VERY MUCH FOR YOUR HELP! IT IS GREATLY APPRECIATED!!!!
JulioDecember 12, 2021 at 12:39 pm #1332478Hi,
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 -
AuthorPosts
- The topic ‘Add Play Button on Mouseover’ is closed to new replies.