0
CSS: Наложение divs друг на друга с использованием синтаксиса flexbox (vw, vh)?
.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, он показывает наложение цвета. Это простой эффект. Однако проблема в том, что я использовал flex, vw и vh, потому что я хотел создать отзывчивый сайт. Поэтому, когда я делал размер divs идеально похожи друг на друга, как только размер браузера станет другим, чем больше не подходит. Я пытался найти примеры в Интернете, но обычно это фиксированный размер с px или позицией. Я хотел бы знать, есть ли способ наложить цвет 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>
Так Когда пользователь парить их мышью на DIV миниатюр, описание DIV должен появиться и охватывают весь 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 при одном размере экрана, этот макет будет разваливаться, когда вы измените размер экрана, потому что 'vh' /' vw' не связаны с div. –
@JakeParis да. – camila