レスポンシブ・ホバー・オーバー・レスポンシブ・イメージ

Question

私は、ホバー・ボックスを一連のイメージに重ねるためのチュートリアルを使用してきました。
この記事はhereです。

は、私は私のイメージとホバーウィンドウサイズに応答するようにしたい除いて、それが（ちょうど幅経由で結構です）、私はこれを行う方法を見上げてみた、完璧に働いて手に入れました。固定値ではなく％を使用する場合のように見えますが、マークアップの実行方法を十分に知りません。イメージをサイズ変更しても、ホバーボックスはサイズ変更されません。

これを実現するために既存のCSSに何かを追加することは可能ですか？

ul.img-list { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    text-align: center; 
 
} 
 

 
ul.img-list li { 
 
    display: inline-block; 
 
    height: 150px; 
 
    margin: 0 1em 1em 0; 
 
    position: relative; 
 
    width: 150px; 
 
} 
 

 
span.text-content { 
 
    background: rgba(0,0,0,0.5); 
 
    color: white; 
 
    cursor: pointer; 
 
    display: table; 
 
    height: 150px; 
 
    left: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 150px; 
 
    opacity: 0; 
 
    -webkit-transition: opacity 500ms; 
 
    -moz-transition: opacity 500ms; 
 
    -o-transition: opacity 500ms; 
 
    transition: opacity 500ms; 
 
} 
 

 
span.text-content span { 
 
    display: table-cell; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
} 
 

 
ul.img-list li:hover span.text-content { 
 
    opacity: 1; 
 
}

<ul class="img-list"> 
 
    <li> 
 
    <a href="#"> 
 
     <img src="http://placehold.it/150x150"> 
 
     <span class="text-content"><span>Text</span></span> 
 
    </a> 
 
    </li> 
 
</ul>

Answer 1

あなたは画像比率を維持するだけの幅を使用することができます。

aとimgにはdisplay：blockを使用し、テキストを中央に配置するにはflexを使用できます。

あなたが探しているレスポンシブな振る舞いについてあまりにもわからない場合は、liに％widthを使用するか、％width + min-widthとmax-widthを組み合わせて使用​​できます。

％幅が50％（および最大/最小幅）に設定されている例であれば、他の値でも単位でも構いません。

ul.img-list { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    text-align: center; 
 
} 
 

 
ul.img-list li { 
 
    display: inline-block; 
 
    vertical-align:top; 
 
    margin: 0; 
 
    position: relative; 
 
    width:50%; 
 
    max-width:100vh; 
 
    min-width:60vh; 
 
} 
 
ul.img-list li a, ul.img-list li a img { 
 
    display:block; 
 
    width:100%; 
 
    } 
 
span.text-content { 
 
    background: rgba(0,0,0,0.5); 
 
    color: white; 
 
    cursor: pointer; 
 
    display:flex; 
 
    left: 0; 
 
    right:0; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom:0; 
 
    opacity: 0; 
 
    -webkit-transition: opacity 500ms; 
 
    -moz-transition: opacity 500ms; 
 
    -o-transition: opacity 500ms; 
 
    transition: opacity 500ms; 
 
} 
 

 
span.text-content span { 
 
    margin:auto; 
 
} 
 

 
ul.img-list li:hover span.text-content { 
 
    opacity: 1; 
 
} 
 
* { 
 
    margin:0; 
 
    padding:0; 
 
    }

<ul class="img-list"> 
 
    <li> 
 
    <a href="#"> 
 
     <img src="http://placehold.it/150x150"> 
 
     <span class="text-content"><span>Text</span></span> 
 
    </a> 
 
    </li> 
 
</ul>

Answer 2

また、画像上のオーバーレイのコンテンツを表示するには、擬似要素を使って、このようにそれを行うことができます。このメソッドは完全に応答します。

.wrapper { 
 
    width: 100%; 
 
    overflow: auto; 
 
    padding: 1%; 
 
    box-sizing: border-box; 
 
    background: rgba(0, 0, 0, 0.1); 
 
    border-radius: 8px; 
 
} 
 

 
/* Columns floated left */ 
 
.col-4 { 
 
    width: 33.3%; 
 
    float: left; 
 
    padding: 1%; 
 
    box-sizing: border-box; 
 
    height: auto; 
 
    overflow: hidden; 
 
} 
 

 
/* Container to make absolute positioning easier on psuedo element */ 
 
.image_container { 
 
    position: relative; 
 
    overflow: auto; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.image_container img { 
 
    width: 100%; 
 
    display: block; 
 
} 
 

 
/* Structure for ::before element */ 
 
#img_1::before, 
 
#img_2::before, 
 
#img_3::before { 
 
    background: rgba(0, 0, 0, 0.5); 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
    display: block; 
 
    opacity: 0; 
 
    color: white; 
 
    padding: 10px; 
 
    transition: 0.5s ease; 
 
} 
 

 
/* Hover state for container to show ::before on mouseover */ 
 
.image_container:hover#img_1::before, 
 
.image_container:hover#img_2::before, 
 
.image_container:hover#img_3::before { 
 
    opacity: 1; 
 
    cursor: pointer; 
 
} 
 

 
/* Text for ::before elements */ 
 
#img_1::before { 
 
    content: 'Image Title 1'; 
 
} 
 
#img_2::before { 
 
    content: 'Image Title 2'; 
 
} 
 
#img_3::before { 
 
    content: 'Image Title 3'; 
 
}

<div class="wrapper"> 
 
    <div class="col-4"> 
 
    <div class="image_container" id="img_1"> 
 
     <img src="https://images.unsplash.com/reserve/B6PfiQ8QoSzmsZYOCkSB__DSC0530-1.jpg?dpr=1&auto=format&fit=crop&w=1500&h=1004&q=80&cs=tinysrgb&crop="> 
 
    </div> 
 
    </div> 
 
    <div class="col-4"> 
 
    <div class="image_container" id="img_2"> 
 
     <img src="https://images.unsplash.com/photo-1418985991508-e47386d96a71?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop="> 
 
    </div> 
 
    </div> 
 
    <div class="col-4"> 
 
    <div class="image_container" id="img_3"> 
 
     <img src="https://images.unsplash.com/photo-1476362555312-ab9e108a0b7e?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop="> 
 
    </div> 
 
    </div> 
 
</div>

また、あなたがそれを必要に応じて、あなたにオーバーレイ内のテキストをより細かく制御を与えるだろうdivためbackground-imageとして画像を設定することができます。