サムネイルにカーソルを置くと情報を表示

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

ここでソートする必要があるものがいくつかあります。まず、あるものを他のものの上に乗せて頭を上げる必要があります。そのため、以下を使用して、ホバークラス。一部の人々はそれを好きではないかもしれない - - キーを使用すると、フェードにアイテムをしたい画像

http://jsfiddle.net/aDwe4/

次の上にテキストを取得するために絶対位置ラップで絶対位置を使用しているが、jQueryのは、このスーパーになります簡単 - 最後に、あなたが今tempalteあなたのワードプレスにこれを翻訳する必要があるいくつかのスクリプトタグ

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

でホバークラスをドロップすると、あなたのフッターにアニメーション機能を置く - 私はあなたのテンプレートで何が起こっているのかわからないんだけど - 私は例を書くだけです。私はget_the_image pluginはその後、あなたは明らかにどのようにget_the_image作品ルックアップする必要があるとしているが、私はあなたが笑ってしなければならない、このすべてを考えるあなたのループ内

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

をこのような何かを入れてインストールします！