Modifying existing hover effect

Hi Thomas,

1. The following CSS will allow you to adjust the size and style of the text. To get started I would recommend just changing the font-size of the title to a smaller value. The values seen below are the default ones.

.foogallery.fg-preset.fg-sarah .fg-caption-title {
	word-spacing: -.15em;
	font-weight: 300;
	font-size: 18px;
}
.foogallery.fg-preset.fg-sarah .fg-caption-desc {
	letter-spacing: 1px;
	font-size: 10px;
}

2. The below makes the title only appear on hover by setting the opacity to 0 and then also setting a simple transition on it so it doesn’t just suddenly appear but rather fade in very quickly in time with the rest of the caption.

.foogallery.fg-preset.fg-sarah .fg-caption-title {
	opacity: 0;
	transition: opacity .35s;
}
.foogallery.fg-preset.fg-sarah .fg-item-inner:hover .fg-caption-title {
	opacity: 1;
}

To get these styles to apply to your gallery you would need to include them in your page. Adding the above to your sites styles.css file will have it apply globally so any gallery using the Sarah preset will be modified.

To target only one specific gallery you can use the Custom CSS meta box on the gallery edit page to have it apply to just the gallery you are editing however you would need to change the CSS selectors slightly to include the gallery’s ID. The ID is given to you in the description of the Custom CSS meta box and would look something like #foogallery-gallery-60 { }. To change the CSS selectors to use the gallery’s ID is very simple, in the above CSS where ever you see .foogallery you would replace it with your gallery’s ID, in this example #foogallery-gallery-60. So if we look at the CSS to change the font-size from question #1 it would become the following:

#foogallery-gallery-60.fg-preset.fg-sarah .fg-caption-title {
	word-spacing: -.15em;
	font-weight: 300;
	font-size: 18px;
}
#foogallery-gallery-60.fg-preset.fg-sarah .fg-caption-desc {
	letter-spacing: 1px;
	font-size: 10px;
}

This ensures the changes are only ever applied to the gallery with that specific ID and only when it is using the Sarah preset.

Thanks
Steve

@steveush HUGE thank you for this detailed response (sorry I wasn’t able to respond until now)! I not only solved the problem but this is my first intro to a working CSS snippet that I can hopefully expand upon.