将鼠标悬停在缩略图上时显示信息

Question

我在我的网站上创建了网格投资组合页面，我正在寻找将缩略图添加到功能。每当有人将鼠标悬停在缩略图上时，都会显示帖子标题，帖子日期和摘要。

我一直在试图找到我的意思，这是非常相似的例子;

http://lucybenson.net/redesign2011/

到目前为止，我在WordPress的循环看起来像这样

http://pastie.org/2135220

是否有做这的插件吗？如果没有，任何人都可以告诉我如何实现这一目标？

在此先感谢。

Answer 1

对于这种事情有plugins，但它很容易做你自己。

这不是测试，但它应该让你在正确的方向前进：

<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

如果你正在寻找一个JavaScript的独立的解决方案 - 我知道，听起来很愚蠢，但它值得一尝试 - 你可以纯粹通过CSS来完成。这并不难 - http://jsfiddle.net/teddyrised/TWBhU/

我所做的就是使用-webkit-transition/transition property。当然，我的解决方案并不像Jesse发布的那样优雅，但是知道CSS也可以发挥一些神奇的作用。

Answer 3

这里有几件事你需要在这里进行排序 - 首先你需要让你的头在另一个之上得到一个东西 - 所以这是你真正简单地在css中使用：悬停类。关键是使用绝对位置的绝对定位的包装来获得你想要的淡出该项目上的图像

http://jsfiddle.net/aDwe4/

下一页顶部的文本 - 有些人可能不喜欢它 - 但jQuery让这个超级易 - 下降悬停类，并把动画功能，在您的页脚在一些脚本标记

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

最后，您现在需要翻译成你的WordPress这个tempalte - 我不知道发生了什么事情与你的模板 - 所以我只写一个例子。我将安装get_the_image plugin然后把这样的事情你的循环中

<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> 

你显然将不得不查找如何get_the_image的作品，但我认为这一切你应该笑！