將鼠標懸停在縮略圖上時顯示信息

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的作品，但我認爲這一切你應該笑！