У меня есть следующий код, при наведении курсора наложение показывает, что под ним, однако это наложение мешает мне взаимодействовать с содержимым под ним.
Мне нужно взаимодействовать с контентом в .media, но .card-overlay блокирует его. Я пробовал события указателя: нет; это работает, но тогда анимация при наведении не будет работать и покажет контент .media под ним
& #card {
overflow: hidden;
position: relative;
display: flex;
max-width: 100%;
height: 50vh;
margin-bottom: 9%;
//border: 3px solid red;
//flex: 0% 1 auto;
& .media {
position: relative;
// border: 3px solid green;
video {
width: 100%;
min-height: 50vh;
height: auto;
object-fit: cover;
z-index: 15;
}
& .sketchfab-embed-wrapper {
position: relative;
height: 100%;
cursor: pointer;
pointer-events: auto;
width: 100%;
z-index: 1;
& iframe {
z-index: 1;
// border: 3px solid red;
position: relative;
width: 179%;
height: 100%;
}
}
}
& .card-overlay {
left: 0px;
top: 0px;
position: absolute;
// border: 3px solid green;
z-index: 16;
height: 100%;
padding: 1%;
opacity: 100%;
width: 100%;
&::after {
content: '';
-webkit-border-radius: var(--border);
-moz-border-radius: var(--border);
-ms-border-radius: var(--border);
-o-border-radius: var(--border);
border-radius: var(--border);
background: randomColor();
height: 100%;
mix-blend-mode: normal;
width: 100%;
// border: 2px solid red;
position: absolute;
top: 0px;
right: 0px;
z-index: 1;
transition: width .5s cubic-bezier(.19, 1, .22, 1);
-webkit-transition: width .5s cubic-bezier(.19, 1, .22, 1);
-moz-transition: width .5s cubic-bezier(.19, 1, .22, 1);
-ms-transition: width .5s cubic-bezier(.19, 1, .22, 1);
-o-transition: width .5s cubic-bezier(.19, 1, .22, 1);
}
&:hover::after {
mix-blend-mode: difference;
//opacity: 50%;
background-color: var(--clr-fourth);
width: 0px;
left: 0px;
transition: width .5s cubic-bezier(.19, 1, .22, 1);
-webkit-transition: width .5s cubic-bezier(.19, 1, .22, 1);
-moz-transition: width .5s cubic-bezier(.19, 1, .22, 1);
-ms-transition: width .5s cubic-bezier(.19, 1, .22, 1);
-o-transition: width .5s cubic-bezier(.19, 1, .22, 1);
}