Title: Hover Effect
Last modified: August 21, 2016

---

# Hover Effect

 *  Resolved [metis-counsel](https://wordpress.org/support/users/metis-counsel/)
 * (@metis-counsel)
 * [12 years, 8 months ago](https://wordpress.org/support/topic/hover-effect-2/)
 * Hi Mike!
 * Absolutely terrific plugin here. I would be completely willing to pay for a pro
   version if you ever decide to offer extensive customization to this plugin. Congratulations
   on this!
 * I’m helping a client of mine with a new design for her blog using WP Tiles. She
   is a survivalist on the Discovery Channel: [http://zerraexpeditions.com/zerra-news/](http://zerraexpeditions.com/zerra-news/).
   Is there any way you could provide some guidance on how to program the hover 
   effect? When you hover over a tile, the tile changes color and a title appears(
   similar to: [http://www.athousandguitars.com](http://www.athousandguitars.com)).
   I believe Maya from LA designed this site. I would greatly appreciate some direction
   on this and code snippets if it’s a simple modification. Thanks so much!!!
 * Mike
 * [http://wordpress.org/plugins/wp-tiles/](http://wordpress.org/plugins/wp-tiles/)

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

 *  Plugin Author [Mike Martel](https://wordpress.org/support/users/mike_cowobo/)
 * (@mike_cowobo)
 * [12 years, 8 months ago](https://wordpress.org/support/topic/hover-effect-2/#post-4144639)
 * Hi Mike,
 * Sorry for the late response. To add a hover effect, add a css hover rule to the
   tiles. One way of cheating from the website you mention, is by using web inspector/
   firebug to check the CSS when you hover over an element. It reveals that they
   did:
 *     ```
       .wp-tile-container .grid .tile-byline:hover {
           position: absolute;
           left: 0px;
           right: 0px;
           bottom: 0px;
           height: 100%;
           padding: 0px 5px;
           opacity: 0.85;
       }
   
       .wp-tile-container .grid .tile-byline {
           position: absolute;
           left: 0px;
           right: 0px;
           bottom: 0px;
           height: 100%;
           padding: 0px 5px;
           opacity: 0;
           background-color: rgb(0, 0, 0);
           font-family: AThousandGuitars;
           font-size: 48px;
       }
       ```
   
 * To achieve the effect, all you really need to change is the opacity. The rest
   is just placement of the overlay. So, bare bones of what you’ll need to put in
   your (child) theme:
 *     ```
       .wp-tile-container .grid .tile-byline:hover {
           opacity: 0.85;
       }
   
       .wp-tile-container .grid .tile-byline {
           opacity: 0;
       }
       ```
   
 * **Bonus**: if you want, you could even add a little transition effect with css
   transitions, by adding something along the lines of this to the `.wp-tile-container.
   grid .tile-byline` rule:
 *     ```
       -webkit-transition: opacity 0.5s;
       transition: opacity 0.5s;
       ```
   
 * Good luck!
    Mike
 * Ps. the website you mention is by [athousandguitars](http://wordpress.org/support/profile/athousandguitars).
   Maya made [http://myheadhurts.co/](http://myheadhurts.co/).
 *  Thread Starter [metis-counsel](https://wordpress.org/support/users/metis-counsel/)
 * (@metis-counsel)
 * [12 years, 8 months ago](https://wordpress.org/support/topic/hover-effect-2/#post-4144643)
 * This is very helpful. Thanks, Mike! I’ve also been trying to add a space after
   each comma when categories are displayed. I’m fairly confident that this is the
   code snippet I must change to do this:
 * case ‘cats’ :
    default : $byline = wp_get_post_categories( $post->ID, array( “
   fields” => “names” ) ); break;
 * Your guidance would be appreciated on this one. I’ll also start a new post so
   others can find this issue quicker. Thanks!
    Mike

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

The topic ‘Hover Effect’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/wp-tiles_8f8e84.svg)
 * [WP Tiles](https://wordpress.org/plugins/wp-tiles/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/wp-tiles/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/wp-tiles/)
 * [Active Topics](https://wordpress.org/support/plugin/wp-tiles/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/wp-tiles/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/wp-tiles/reviews/)

 * 2 replies
 * 2 participants
 * Last reply from: [metis-counsel](https://wordpress.org/support/users/metis-counsel/)
 * Last activity: [12 years, 8 months ago](https://wordpress.org/support/topic/hover-effect-2/#post-4144643)
 * Status: resolved