Showing post title as overlay on featured image on hover

  • Hi everyone,

    I am building a static homepage which features a number of books. The front page only shows covers and I want each image to show the title over the image when the mouse is hovered. At present I have it so that the opacity changes, which I want, but I can’t get it to pull and display the title.

    I really want to be able to do this with PHP as the home page content will change (it will display books tagged with ‘featured’). My assumption is that it would be possible to do this by calling ‘<? php get_title(); ?>’ etc while hovered but no luck.

    Can anyone put me on the right track with this? The two bits of code I have in place at the moment relating to this are below.

    home.php:

    <span class="new-wrapper">
<a href="<?php the_permalink() ?>"><?php echo get_the_post_thumbnail( $post_id, $size=0, $attr ); ?></a>
</span>

    CSS

    .new-wrapper {float: left; width: 95px; height: 150px; margin: 0px 10px 5px 0px;}
.new-wrapper:hover {opacity: 0.25; filter: alpha(opacity=100);
 	-webkit-transition: opacity .15s linear;}
Viewing 2 replies - 1 through 2 (of 2 total)

  • try:

    <span class="new-wrapper">
<a href="<?php the_permalink() ?>"><?php echo get_the_post_thumbnail( $post_id, $size=0, $attr ); ?></a>
<span><?php the_title(); ?></span>
</span>

    and (example only):

    .new-wrapper {float: left; width: 95px; height: 150px; margin: 0px 10px 5px 0px;}
.new-wrapper:hover {opacity: 0.25; filter: alpha(opacity=100);
 	-webkit-transition: opacity .15s linear;}
.new-wrapper span { visibility: hidden; }
.new-wrapper:hover span { visibility: visible; }
.new-wrapper { position: relative; }
.new-wrapper span { position: absolute; top: 30%; }

    (not tested; it will be useful if you can link to your site to illustrate how the code is working so far)

    Thread Starter rjpinney

    (@rjpinney)

    That’s done the job perfectly, thank you for your swift reply!

    The only problem is that the opacity overlay is on top of the text so there is little contrast between them making it very difficult to read!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Showing post title as overlay on featured image on hover’ is closed to new replies.