Title: Modifying existing hover effect
Last modified: January 5, 2019

---

# Modifying existing hover effect

 *  Resolved [fablelabs](https://wordpress.org/support/users/fablelabs/)
 * (@fablelabs)
 * [7 years, 4 months ago](https://wordpress.org/support/topic/modifying-existing-hover-effect/)
 * I really enjoy your hover effect “Sarah” but the problem is my thumbnails are
   too small to display the title properly. I don’t have any familiar with CSS but
   willing to learn.
 * 1. How would I go about sizing this down?
    2. How would I make the title only
   appear on hover?
 * Best,
    Thomas

Viewing 2 replies - 1 through 2 (of 2 total)

 *  Plugin Author [steveush](https://wordpress.org/support/users/steveush/)
 * (@steveush)
 * [7 years, 4 months ago](https://wordpress.org/support/topic/modifying-existing-hover-effect/#post-11056662)
 * 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
 *  Thread Starter [fablelabs](https://wordpress.org/support/users/fablelabs/)
 * (@fablelabs)
 * [7 years, 4 months ago](https://wordpress.org/support/topic/modifying-existing-hover-effect/#post-11075581)
 * [@steveush](https://wordpress.org/support/users/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.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Modifying existing hover effect’ is closed to new replies.

 * ![](https://ps.w.org/foogallery/assets/icon-256x256.gif?rev=2602542)
 * [Photo Gallery by FooGallery : Responsive Image Gallery, Masonry Gallery & Carousel](https://wordpress.org/plugins/foogallery/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/foogallery/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/foogallery/)
 * [Active Topics](https://wordpress.org/support/plugin/foogallery/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/foogallery/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/foogallery/reviews/)

## Tags

 * [preset](https://wordpress.org/support/topic-tag/preset/)

 * 2 replies
 * 2 participants
 * Last reply from: [fablelabs](https://wordpress.org/support/users/fablelabs/)
 * Last activity: [7 years, 4 months ago](https://wordpress.org/support/topic/modifying-existing-hover-effect/#post-11075581)
 * Status: resolved