Show info when hover over thumbnail [closed]

Closed. This question needs debugging details. It is not currently accepting answers. 开发者_StackOverflow社区

---

Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.

Closed 5 years ago.

Improve this question

I've created a grid portfolio page on my website and I'm looking to add a feature to the thumbnails. I'd like that whenever someone hovers over a thumbnail, it will show the post title, date of post and excerpt.

I've been trying to find an example of what I mean and this is very similar;

http://lucybenson.net/redesign2011/

So far my loop on Wordpress looks like this

http://pastie.org/2135220

Is there a plugin that does this? If not, would anyone be able to tell me how I could achieve this?

Thanks in advance.

---

There are plugins for this kind of thing, but it's very easy to do by yourself.

This isn't tested, but it should get you going in the right direction:

<style type="text/css" media="screen">

    .image-list {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    .image-list li {
        margin: 0 10px 0 0;
        padding: 0;
        float: left;
    }

        .image-list li a {
            display: block;
            position: relative;
            height: 50px;
            width: 50px;
        }

            .image-list li a span {
                display: block;
                height: 100%;
                width: 100%;
                position: absolute;
                top: 0;
                left: 0;
                background-color: rgba(0,0,0,0.4);
                color: #fff;
            }

</style>

<ul class="image-list">
    <li>
        <a href="#">
            <img src="myimage.jpg" alt="My Image">
            <span>
                This is my overlay content
            </span>
        </a>
    </li>
</ul>

<script type="text/javascript">

$(function() {

    $(".image-list li a").hover(

        // Mouse Over
        function() {

            $(this).find("span").fadeIn();

        }, 

        // Mouse Out
        function() {

            $(this).find("span").fadeOut();

        }
    );

});

</script>

---

If you're looking for a javascript-independent solution - I know, sounds really silly but it's worth a try - you can do it through CSS purely. It's not too hard - http://jsfiddle.net/teddyrised/TWBhU/

What I did was to use the -webkit-transition / transition property. Of course, my solution isn't as elegant as what Jesse has posted, but it's just nice to know CSS could work some magic, too.

---

There are a few things you need to get sorted here - first you need to get your head around getting one thing on top of the other - so here's the effect you're after done really simply in just css using the :hover class. The key is using the absolute position in an absolutely positioned wrap to get the text on top of the image

http://jsfiddle.net/aDwe4/

Next you want the fade the item - some people might not like it - but jquery makes this super easy - drop the hover class and put the animate function in your footer in some script tags

http://jsfiddle.net/aDwe4/1/

Finally you now need to translate this into your wordpress tempalte - I'm not sure what's going on with your template - so I'll just write an example. I would install the get_the_image plugin then put something like this within your loop

<div class="imagewrap">
<div class="image">
<?php if ( function_exists( 'get_the_image' ) ) get_the_image(); ?>
</div>
<div class="copy">
<h3><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h3>
<?php the_excerpt(); ?>
</div>
</div>

You're obviously going to have to look up how get_the_image works, but I think with all this you should be laughing!