Bootstrapレスポンシブテーマを使用してWordpressに取り組んでいます。
私の問題は、画像にホバー効果が必要なことですが、画像にホバーすると、ホバー div の高さが増加します。
先ほどレスポンシブテーマを使っているのですが、モバイル画面で開くと反応せず、divの幅がページ全体に広がってしまいました。span3
画像をレスポンシブにするためにクラスを使用しています。
画像とホバー div の Css は次のとおりです。
.image{position: relative;}.image img {max-width: 100%; max-height: 100%;}.hoverimage {position: absolute; top: 0; left: 0; display: none; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8);/* For IE 5.5 - 7*/filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);/* For IE 8*/-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";}
.image:hover .hoverimage { display: block;}.image_text {color:#FFFFFF;margin:60px;}
ホバーdivを使用しているコードは次のとおりです。
<li class="span3 image">
<img src="http://placehold.it/270x150" alt="" class="img-polaroid" /><div class="hoverimage img-polaroid"><p class="image_text"><a href="https://globalmanetwork.com/">globalmanetwork.com/</a></p></div>
</li>
<li class="span3 image">
<img src="http://placehold.it/270x150" alt="" class="img-polaroid" /><div class="hoverimage img-polaroid"><p class="image_text"><a href="https://globalmanetwork.com/">globalmanetwork.com/</a></p></div>
</li>