Skip to content

Instantly share code, notes, and snippets.

@10h30
Forked from srikat/functions.php
Created April 16, 2015 01:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save 10h30/53e74a55e4c9aec5c5eb to your computer and use it in GitHub Desktop.
Save 10h30/53e74a55e4c9aec5c5eb to your computer and use it in GitHub Desktop.
Revealing Featured Images when hovering on Posts in Whitespace Pro. http://sridharkatakam.com/reveal-featured-images-hovering-posts-whitespace-pro/
add_image_size( 'home-image', 400, 400, true );
add_action( 'genesis_entry_header', 'genesis_do_post_image', 1 );
//* Display home image (Featured Image for Posts) above .article-wrap
add_action( 'genesis_entry_header', 'sk_featured_image', 1 );
function sk_featured_image() {
if ( ! has_post_thumbnail() ) {
return;
}
$image_args = array(
'size' => 'home-image',
'format' => 'url'
);
// Get the featured image URL
$image = genesis_get_image( $image_args );
printf( '<div class="home-image"><a href="%s" rel="bookmark"><img src="%s" alt="%s" /></a></div>', get_permalink(), $image, the_title_attribute( 'echo=0' ) );
}
/* Featured images on hover for Posts on front page */
.home .content .entry {
position: relative;
}
.home-image {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.home-image img {
vertical-align: top;
}
.home .content .entry:hover .home-image {
opacity: 1;
}
.site-footer .social .simple-social-icons:first-child {
position: relative;
}
@media only screen and (max-width: 1200px) {
.home-image {
position: static;
opacity: 1;
}
}
@media only screen and (max-width: 799px) {
.home-image {
margin-bottom: 20px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment