Infinity Pro: Headshots Overlay

[StephanieT]

In the demo theme of Infinity Pro, the headshots of the Infinity Team on the homepage turn a shade of black with text when you hover over them. I can't figure out how that is accomplished. Can someone help me? Thanks!

[Victor Font]

The overlay is always in the same spot. There's a jQuery function in front-page.js that adds a CSS class named focused when the image had focus and removes it when the image loses focus.

The CSS focus class changes the overlay opacity to 1.

This is the CSS:

.featuredpage .team-member.entry:hover .entry-header,
.featuredpage .team-member.entry:focus .entry-header,
.featuredpage .team-member.entry.focused .entry-header {
	background-color: rgba(0,0,0,0.8);
	opacity: 1;
	-ms-filter: "alpha(Opacity=1)";
	filter: alpha(opacity=1);
}

This is the jQuery:

	$( '.featuredpage .team-member.entry *' )
	.focus( function() {
		$(this).closest( '.entry' ).addClass( 'focused' );
	})
	.blur( function() {
		$(this).closest( '.entry' ).removeClass( 'focused' );
	});

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[StephanieT]

Thank you, Victor. After struggling with this for a couple of days, I finally decided to change themes to preserve my sanity. Thank you for your help though!

[Author]

Posts