Наложение элементов div друг на друга с использованием синтаксиса flexbox (vw, vh)? ⇐ Jquery

[Anonymous]

.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{
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 {
font-size: 20px;
/* font-size: calc(4vw + 4vh + 2vmin); */
font-weight: bold;
line-height: 2em;
}

div.description_desc {
font-size: 15px;
line-height: 2em;
}

.thumbnail:hover .description {
position:absolute;
z-index: 1000;
display:block;
background-color: rgba(252, 111, 27, 0.9);
color: rgba(255, 255, 255, 0.9);
}







Item name

Item description

Read Button




_____
Item name
_____
Item description








Я работал над тем, чтобы создать эффект, когда пользователь наводит указатель мыши на элемент div, и он показывает наложение цвета. Это простой эффект. Однако проблема в том, что я использовал flex, vw и vh, потому что хотел сделать адаптивный сайт. Поэтому, когда я сделал размеры элементов div идеально совпадающими друг с другом, как только размер браузера стал другим, он больше не совпадал. Я пытался найти примеры в Интернете, но обычно они имеют фиксированный размер с указанием пикселей или положения. Я хотел бы знать, есть ли способ наложить цветной div на другой div. Если решения нет, думаю, мне придется перестроить сайт и сделать его неотзывчивым.
Вот HTML




Item name

Item description

Read Button




_____
Item name
_____
item description




Поэтому, когда пользователь наводит указатель мыши на 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;
}


Подробнее здесь: https://stackoverflow.com/questions/423 ... yntaxvw-vh