Show info when hover over thumbnail [closed] - php

Question

Closed. This question needs debugging details. It is not currently accepting answers.
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.

Answer 1

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>

Answer 2

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.

Answer 3

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><?php the_title(); ?></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!