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