0
CSS：flexbox構文（vw、vh）を使用してdivを重ねて表示しますか？
.thumbnail{
\t padding: 0px 0px 0px 0px;
border:1px solid gray;
background-color: white;
border-radius: 5px;
margin: 5px 10px 5px 10px;
min-width: 10vw;
min-height: 40vh;
display: flex;
flex-direction: column;
cursor: pointer;
z-index: 1000;
}
.thumbnail_img{
\t width: 100%;
height: auto;
z-index: 1000;
}
p.caption_heading{
\t font-weight: bold;
line-height: 1em;
font-size: 20px;
}
span.caption_desc{
\t font-size:15px;
\t color: gray;
}
.caption{
\t flex-grow: 1;
\t z-index: 1000;
\t background-color: white;
}
.thumbnail_footer{
\t padding: 0px 10px 10px 10px;
\t background-color: white;
\t z-index: 1000;
}
.description{
position: absolute;
width: 12.7vw; /* as image */
height: 40vh; /* as image */
line-height: 200px; /* as image */
text-align: center;
text-decoration: none;
color: rgba(0, 0, 0, 0.0);
font-weight: bold;
z-index: 0;
border-radius: 5px;
background-color: rgba(252, 111, 27, 0.0);
transition: background-color 0.5s ease;
display: flex;
flex-direction : column;
}
div.description_heading {
\t font-size: 20px;
\t /* font-size: calc(4vw + 4vh + 2vmin); */
\t font-weight: bold;
\t line-height: 2em;
}
div.description_desc {
\t font-size: 15px;
\t line-height: 2em;
}
.thumbnail:hover .description {
\t position:absolute;
z-index: 1000;
display:block;
background-color: rgba(252, 111, 27, 0.9);
color: rgba(255, 255, 255, 0.9);
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="flex_body" style="display: flex; flex-direction: row; justify-content: space-between; ">
<div class="thumbnail">
\t \t \t \t <div class="thumbnail_img">
\t \t \t <img class="thumbnail_img" src="./resources/img/size_minmuri1.jpg" alt="...">
\t \t \t </div>
\t \t \t <div class="caption">
\t \t \t <p class="caption_heading">Item name<br/>
\t \t \t <span class="caption_desc">Item description</span></p>
\t \t \t </div>
\t \t \t <div class="thumbnail_footer">
\t \t \t <a href="#" class="btn btn-primary" role="button">Read</a> <a href="#" class="btn btn-default" role="button">Button</a> \t
\t \t \t </div>
\t \t \t <!-- overlay item -->
\t \t \t <div class="description" href="#">
\t \t \t \t \t <div class="description_heading"><br>_____<br>Item name<br>_____</div>
\t \t \t \t \t <div class="description_desc">Item description</div>
\t \t \t \t \t
\t \t \t </div>
\t \t \t <!-- overlay item -->
\t \t \t </div>
</div>私はdivの上にマウスオーバーユーザーは、それがカラーオーバーレイを示したときに効果を作るために取り組んできました。それは単純な効果です。しかし、私はフレックス、vw、vhを使用していました。なぜなら、レスポンシブサイトを作りたいからです。ですから、divのサイズを完全に一致させると、ブラウザのサイズがそれ以上一致しなくなります。私はインターネット上で例を見つけることを試みたが、それらは通常pxまたは位置で固定サイズである。私は別のdivに色のdivをオーバーレイする方法があるかどうかを知りたいです。解決策がない場合、サイトを無応答で再構築する必要があると思います。ここで
は、ユーザーがサムネイルdivの上にマウスを置くとそう、説明のdivが表示され、全体のサムネイルdiv要素をカバーしなければならないHTML
<div class="thumbnail">
<div class="thumbnail_img">
<img class="thumbnail_img" src="./resources/img/size_minmuri1.jpg" alt="...">
</div>
<div class="caption">
<p class="caption_heading">Item name<br/>
<span class="caption_desc">Item description</span></p>
</div>
<div class="thumbnail_footer">
<a href="#" class="btn btn-primary" role="button">Read</a> <a href="#" class="btn btn-default" role="button">Button</a>
</div>
<!-- overlay item -->
<div class="description" href="#">
<div class="description_heading"><br>_____<br>Item name <br>_____</div>
<div class="description_desc">item description</div>
</div>
<!-- overlay item -->
</div>
です。ここで
は、あなたがあなたのコードの多くのミスを犯したCSS
.thumbnail{
padding: 0px 0px 0px 0px;
border:1px solid gray;
background-color: white;
border-radius: 5px;
margin: 5px 10px 5px 10px;
min-width: 10vw;
min-height: 40vh;
display: flex;
flex-direction: column;
cursor: pointer;
z-index: 1000;
}
.thumbnail_img{
width: 100%;
height: auto;
z-index: 1000;
}
p.caption_heading{
font-weight: bold;
line-height: 1em;
font-size: 20px;
}
span.caption_desc{
font-size:15px;
color: gray;
}
.caption{
flex-grow: 1;
z-index: 1000;
background-color: white;
}
.thumbnail_footer{
padding: 0px 10px 10px 10px;
background-color: white;
z-index: 1000;
}
.description{
background:rgba(252, 111, 27, 0.75);
text-align:center;
padding:45px 0 66px 0;
opacity:0;
-webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;
}
div.description_heading {
font-size: 20px;
font-weight: bold;
line-height: 2em;
}
div.description_desc {
font-size: 15px;
line-height: 2em;
}
.thumbnail:hover .description {
opacity: 1;
}
最初に '.description'要素が隠されていますか？次に、あなたが '.thumbnail'の上にマウスを置いたときに表示されますか？ – JakeParis
'vh'と' vw'単位は常に* viewport *（したがって、名前：*ビューポートの高さ*と*ビューポートの幅*）からの相対値です。したがって、あなたが 'vh'と' vw'ディメンションをあなたのdivに1つのスクリーンサイズでマッチさせることはできますが、 'vh' /' vw'はdiv。 –
@JakeParisはい。 – camila