WordPress.org

Ready to get started?Download WordPress

Forums

WP Tiles
[resolved] Hover Effect (3 posts)

  1. metis-counsel
    Member
    Posted 9 months ago #

    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/. 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). 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/

  2. Mike
    Member
    Plugin Author

    Posted 9 months ago #

    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. Maya made http://myheadhurts.co/.

  3. metis-counsel
    Member
    Posted 9 months ago #

    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

Reply

You must log in to post.

About this Plugin

About this Topic