web-dev-qa-db-ja.com

レスポンシブサイズの画像の画像オーバーレイbootstrap

マウスオーバーするとカラーオーバーレイ（テキストではなく画像のみ）が表示されるレスポンシブグリッドの画像（説明付き）を作成しようとしています。画像の高さが反応するため、オーバーレイが画像だけでなくすべてを覆うという問題が発生しています。

これを修正する方法はありますか？

理解を容易にするために、ここで問題を再現しました。 http://jsfiddle.net/r8rFc/

これが私のHTMLです。

<div class="row">

    <div class="col-xs-12 col-sm-6 col-md-3 project">
        <a href="#">
            <div>
                <img src="http://placehold.it/500x500" class="img-responsive"/>
                <div class="fa fa-plus project-overlay"></div>
            </div>
            <div style="text-align:center;">
                <h3>Project name</h3>
                <p>Image description</p>
            </div>
        </a>
    </div>

</div>

そして私のCSS：

.project-overlay {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(41,128,185,0.9);
    color: #fff;
    padding: 50%;
}

前もって感謝します！

htmlcssresponsive-designtwitter-bootstrap-3
19
RGilkes

含まれるdivにクラスを追加し、次のCSSを設定します。

.img-overlay {
    position: relative;
    max-width: 500px; //whatever your max-width should be 
}

position: relativeは、position: absoluteを持つ子の親要素で、その親に関連して子を配置するために必要です。

[〜＃〜] demo [〜＃〜]

37
brouxhaha

Position：absoluteを指定すると、position：relativeで次に高い要素に自分自身を配置します。この場合、それは.project divです。

画像の直接の親divにposition：relativeのスタイルを与えると、オーバーレイはテキストを含むdivの代わりにそれにキーを合わせます。例： http://jsfiddle.net/7gYUU/1/

 <div class="parent">
    <img src="http://placehold.it/500x500" class="img-responsive"/>
    <div class="fa fa-plus project-overlay"></div>
 </div>

.parent {
   position: relative;
}
3
Michelle

あなたの質問を理解したら、画像の上にオーバーレイを置き、すべてをカバーしたくないですか？

オーバーレイはウィンドウではなくこのdivに対して相対的に配置する必要があるため、親DIV（jsfiddleのコンテンツで名前を変更）の位置を相対に設定します。

.content
{
  position: relative;
}

私はいくつかのポックをし、あなたのフィドルを更新して、オーバーレイがあなたが望むものであると思う（私が思うに）、ちょうど私に知らせてください:) http://jsfiddle.net/b9Vyw/ =

2
ottis

これを機能させるのに少し苦労しました。 Brouxhahaの答えを使用すると、探していたものの90％を得ることができました。しかし、パディング調整では、テキストを好きな場所に配置できません。 topとleftを使用することは、私の目的にとってはうまくいくように見えました。

.project-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    top: 80%;
    left: 20%;
}

http://jsfiddle.net/1rz0b7d8/1/

0
radix07
<div class="col-md-4 py-3 pic-card">
          <div class="card ">
          <div class="pic-overlay"></div>
          <img class="img-fluid " src="images/Site Images/Health & Fitness-01.png" alt="">
          <div class="centeredcard">
            <h3>
              <span class="card-headings">HEALTH & FITNESS</span>
            </h3>
            <div class="content-inner mt-5">
              <p class="lead  p-overlay">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae ipsam nemo quasi quo quae voluptate.</p>
            </div>
          </div>
          </div>
        </div>


.pic-card{
     position: relative;

 }
 .pic-overlay{

    top: 0;
    left: 0;
    right:0;
    bottom:0;
    width: 100%;
    height: 100%;
    position: absolute;
    transition: background-color 0.5s ease;

 }
 .content-inner{
    position: relative;
     display: none;
 }

 .pic-card:hover{
     .pic-overlay{
        background-color: $dark-overlay;

     }

     .content-inner{
         display: block;
         cursor: pointer;
     }

     .card-headings{
        font-size: 15px;
        padding: 0;
     }

     .card-headings::after{
        content: '';
        width: 80%;
        border-bottom: solid 2px  rgb(52, 178, 179);
        position: absolute;
        left: 5%;
        top: 25%;
        z-index: 1;
     }
     .p-overlay{
         font-size: 15px;
     }
 }



enter code here
0
vogonyo