0

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

2 に答える 2

0

CSSを一部変更しました

これを試して;

 .image {

        margin:0px;
        padding:0px;
        position: relative;
    }
    .image img {
        max-width: 100%;
        max-height: 100%;
    }
    .hoverimage {
        position: absolute;
        top: 0px;
        left: 0px;
        display: none;
        width: 100%;
        height: 97%;
        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: inline;
        width:54%;
        /*height:100%; */
    }
    .image_text {
        color:#FFFFFF;
        margin:60px;
    }

これが役に立ったか教えてください。

于 2013-05-30T07:24:47.653 に答える