Community @ The Turning Gate

Support community for TTG plugins and products.

You are not logged in.

#1 2019-05-20 02:15:04

Nico3939
Member
From: France
Registered: 2016-10-05
Posts: 175
Website

Display Font Awesome icon on thumbnail hover

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

#2 2019-05-20 11:48:36

Matthew
Administrator
From: San Francisco, CA
Registered: 2012-09-24
Posts: 5,603
Website

Re: Display Font Awesome icon on thumbnail hover

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;
}

Campagna Pictures, http://campagnapictures.com
The Turning Gate, http://theturninggate.net

Offline

#3 2019-05-20 11:49:46

Matthew
Administrator
From: San Francisco, CA
Registered: 2012-09-24
Posts: 5,603
Website

Re: Display Font Awesome icon on thumbnail hover

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.


Campagna Pictures, http://campagnapictures.com
The Turning Gate, http://theturninggate.net

Offline

#4 2019-05-20 15:07:20

Nico3939
Member
From: France
Registered: 2016-10-05
Posts: 175
Website

Re: Display Font Awesome icon on thumbnail hover

Thanks Matthew

I'm looking after you and tell you again

Nico

Offline

#5 2019-05-20 16:34:23

Nico3939
Member
From: France
Registered: 2016-10-05
Posts: 175
Website

Re: Display Font Awesome icon on thumbnail hover

Matthew,

Your code works perfectly with Backlight 1 without any modification

thank you so much

Offline

#6 2019-05-23 15:04:09

Matthew
Administrator
From: San Francisco, CA
Registered: 2012-09-24
Posts: 5,603
Website

Re: Display Font Awesome icon on thumbnail hover

Great!


Campagna Pictures, http://campagnapictures.com
The Turning Gate, http://theturninggate.net

Offline

Board footer

Powered by FluxBB