Когда я навожу курсор на элемент (.box), который находится чуть ниже элемента (.box), то зависает только указанный выше ⇐ Html

[Anonymous]

Вот ссылка на CodePen
HTML-код

Код: Выделить всё

Document









[img]https://picsum.photos/400/500[/img]


Title
8.2

Overview:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit explicabo voluptates et!



[img]https://picsum.photos/400/500[/img]


Title8.2

Overview:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit explicabo voluptates et!



[img]https://picsum.photos/400/500[/img]


Title8.2

Overview:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit explicabo voluptates et!

CSS-код

Код: Выделить всё

.main{
border: 2px solid magenta;
background-color: #bebdbd;
position: absolute;
width: 30vw;

display:grid;
flex-direction: column;
}

*{
margin: 0;
padding: 0;
}
.box{
/* border: 2px solid black;  */
overflow: hidden;
}
.box img{
width: 200px;
border-radius: 4px;
}

.main .box:hover .overlay{
height: 100px;
/* position: absolute; */
z-index: 999;
top: 0.5%;
transition-delay:0s;
transition-timing-function: linear;
transition-duration: 300ms;
}

.overlay{
position: absolute;
top: -11%;
background-color: #ffffff4e;
width: 190px;
height: 0px;
overflow: hidden;
padding: 5px;
backdrop-filter: blur(16px);
}

#moviebox{
position: relative;
/* border: 2px solid red; */
height: fit-content;
width: 100%;
display: flex;
gap: 1rem;
overflow: hidden;
flex-wrap: wrap;
padding: 5px;

}

#search{
border: none;
margin: 5vh 0vw 5vh 4vw;
height: 5vh;
width: 30vw;
border-radius: 3px;
padding-left: 2%;
background-color: #949292;
color: white;
outline: none;
font-size: 23px;
}

Я пытался сделать так, чтобы наложение появлялось поверх каждого элемента изображения при наведении курсора на элемент изображения.
Но когда я наводил курсор на элементы изображения, которые находятся под верхними элементами, верхние элементы активировались при наведении, я ожидал, что каждый элемент будет отображать наложения при наведении соответствующего элемента поля.>

Подробнее здесь: https://stackoverflow.com/questions/766 ... t-box-then