画像の中央にテキストを取得する、Jqueryで

Question

<a></a>タグ内にいくつかの画像があります。 <a>と<img>タグとの間今

 @foreach($themes as $thema) 
      <a href="#" data-toggle="modal" data-target="#{{ $thema->id }}"> 
       <span class="text">{{ $thema->thema }}</span> 
       <img src="{{ $thema->picture }}"> 
      </a> 
     @endforeach 

は、{{ $thema->thema }}あります。これはちょうど私にトピックのいくつかの名前を与えます。同様に：ゲーム、健康など....今私は私の写真のために、このjQueryのコードを持っている：

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('a img').animate({ 
      opacity:1 
     }); 
     $('a img').hover(function(){ 
      $(this).stop().animate({opacity:.5}, 'fast'); 
     }, function(){ 
      $(this).stop().animate({opacity:1}, 'fast'); 
     }); 
    }); 
</script> 

私はここにこの男からこの効果を持っている：

しかし、今、私はまた、もし私ことをしたいです私のマウスで画像を入力し、トピックの名前もあるはずです。だから私はいくつかのJqueryコードが必要です、それはまた私にトピックを与え、不透明度が50％である間に画像の中央に置く。

私はあなたがすべて私が何を意味するか理解してくれることを願っています。私の英語は最高ではありません。私はまだJqueryを学んでいます。だから、Jqueryの正しい構文が必要です（またはJavascript/CSSソリューション）。

汚れたCSSの方法：

img { 
    margin-left: 5px; 
    width: 275px; 
    height: 228px; 
} 

.text { 
    margin-left: 5px; 
    position: absolute; 
    color: Black; 
    background-color: rgba(255, 255, 255, 0.8); 
    width: 275px; 
    height: 228px; 
    line-height: 228px; 
    text-align: center; 
    font-family: candara; 
    font-size: 24px; 
    opacity: 0; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
    display: inline-block; 
} 

.text:hover { 
    opacity: 0.8; 
} 

Answer 1

私の解決策を示すためのスニペットを作成しました。私の例では、JavaScriptなしでCSSとHTMLを使用しています。このアプローチは、CSSの設計上の懸念をより多く残すことで、メンテナンスを容易にします。 （可能であれば、JavaScriptによるスタイリングとアニメーションは避けてください）hereという一般的な垂直センタリング手法の1つを使用しましたが、そのプロセスは次のとおりです：コンテナの上部からブロックを50％ transform: translateY(-50%);を使用して、それ自身の高さの50％を上げます。

<a href="#" data-toggle="modal" data-target="#{{ $thema->id }}">ラベラーを<figure>タグの周囲に追加して、必要に応じて他のテンプレート変数を挿入してください。

.img-wrapper { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.img { 
 
    /* Change these as needed, everything else should resize appropriately */ 
 
    width: 275px; 
 
    height: 228px; 
 
} 
 
.text-wrapper { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: rgba(255, 255, 255, 0.8); 
 
    opacity: 0; 
 
    -webkit-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    -o-transition: all 0.5s ease; 
 
    transition: all 0.5s ease; 
 
} 
 
.text { 
 
    box-sizing: border-box; 
 
    display: block; 
 
    position: absolute; 
 
    padding: 15px; 
 
    top: 50%; 
 
    width: 100%; 
 
    transform: translateY(-50%); 
 
    color: black; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
    font-family: candara; 
 
    font-size: 24px; 
 
} 
 

 
.img-wrapper:hover .text-wrapper { 
 
    opacity: 0.8; 
 
}

<figure class="img-wrapper"> 
 
    <img class="img" src="http://i.stack.imgur.com/XZ4V5.jpg" /> 
 
    <div class="text-wrapper"> 
 
    <figcaption class="text">some text</figcaption> 
 
    </div> 
 
</figure> 
 
<figure class="img-wrapper"> 
 
    <img class="img" src="http://i.stack.imgur.com/OVOg3.jpg" /> 
 
    <div class="text-wrapper"> 
 
    <figcaption class="text">even more text than the last item so you can see how it flows</figcaption> 
 
    </div> 
 
</figure>