Support community for TTG plugins and products.
NOTICE
The Turning Gate's Community has moved to a new home, at https://discourse.theturninggate.net.
This forum is now closed, and exists here as a read-only archive.
You are not logged in.
Hi,
Do you know if it is possible in Backlight 1, when someone is on a gallery, to display a Font Awesome icon when passing the mouse on the thumbnail (image hover).
Here's an example of what I'm trying to do, but I can not seem to display the icon
https://www.w3schools.com/code/tryit.as … 85M23O7UBW
thank you in advance
Nico
Offline
CSS
----
.thumbnail a.photo-hyperlink::after {
background-color: rgba(255, 255, 255, 0.5);
color: rgba(0, 0, 0, 0.85);
content: "\f002";
font: normal normal normal 14px/1 FontAwesome;
font-size: 48px;
opacity: 0;
position: absolute;
text-rendering: auto;
top: 0; right: 0; bottom: 0; left: 0;
transition: opacity ease-in-out 0.2s;
vertical-align: middle;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.thumbnail:hover a.photo-hyperlink::after {
opacity: 1;
}Offline
Actually, this works in Backlight 2. May need some adjustments for Backlight 1. For example, the classes should probably be changed. I don't have Backlight 1 set up to test on, and I'm not inclined to install it.
Offline
Thanks Matthew
I'm looking after you and tell you again
Nico
Offline
Matthew,
Your code works perfectly with Backlight 1 without any modification
thank you so much
Offline
Great!
Offline