Show title on hover image

  • ikbenbritt

    (@ikbenbritt)


    11 years, 1 month ago

    Hi there,

    I’ve been trying this for waaaaay to long now and somehow I think it can’t be this hard.

    What I’m trying to accomplish is to show the title of the related post (in between the blogpost and the comments) when hovering the image. I managed to get it done on the bottom of the page but I have no idea how (probably just by accident).

    The url: http://www.thereportalist.com/2013/03/the-plaid/

    Current css:
    #ondertitel2 {
    color: #000000;
    float: left;
    font-size: 12px;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    margin-left: 13px;
    margin-right: 0;
    margin-top: -86px;
    position: relative;
    text-align: center;
    width: 100px;
    z-index: -1;
    }

    .relatedposts {
    width: 100%;
    margin: 0 0 20px 0;
    float: left;
    color: #000000;
    font-family: ‘Sackers’,Tahoma,Arial;
    font-size: 18px;
    font-weight: normal;
    padding-bottom: 20px;
    letter-spacing: 2px; border-bottom: 1px solid #000;
    z-index: 0;}

    .relatedposts h3 {font-size: 20px; margin: 0 0 5px 0; }
    .relatedthumb {width: 157px; margin: 0 0px 0 0px; float: left; }
    .relatedthumb img {margin: 0 0 3px 0; padding: 0; z-index: -2;}

    .relatedthumb img:hover {
    opacity: 0.4;
    z-index: 0;
    }

    I’ve been trying way to many different versions of the z-index, thats how I got it working on the bottom, but I can’t figure it out this one.

    Thanks in advance!
    Britt

Viewing 2 replies - 1 through 2 (of 2 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 1 month ago

    So this is what you’re referring to http://awesomescreenshot.com/0e212broc4 ?

    If so, you need to first put the title on the page.

    Thread Starter ikbenbritt

    (@ikbenbritt)

    11 years, 1 month ago

    Yes that’s what I’m referring, but I don’t quite get what you mean, I’m sorry!

    My php code is:

    <div id="readmore">
<div class="relatedposts">
Related posts:<br><br>
<?php
    $orig_post = $post;
    global $post;
    $tags = wp_get_post_tags($post->ID);  

    if ($tags) {
    $tag_ids = array();
    foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
    $args=array(
    'tag__in' => $tag_ids,
    'post__not_in' => array($post->ID),
    'posts_per_page'=>4, // Number of related posts to display.
    'caller_get_posts'=>1
    );  

    $my_query = new wp_query( $args );  

    while( $my_query->have_posts() ) {
    $my_query->the_post();
    ?>  

    <div class="relatedthumb">  

        <a rel="external" href="<? the_permalink()?>"><?php the_post_thumbnail(array(150,150)); ?></a> <br />
<div id="ondertitel2"><?php the_title(); ?> </div> 

    </div>  

    <? }
    }
    $post = $orig_post;
    wp_reset_query();
    ?>  

</div>

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