@MikSantySubmitted about 1 year ago
Is there a better way to do the view icon hover than this way?
Is there a better way to do the view icon hover than this way?
Hi,
You could use pseudo-elements instead to display overlay.
.image::after {
content: ' ';
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.503;
background: var(--tertiary-color);
}
.image .view-icon {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
.image:focus::after,
.image:hover::after,
.image:focus .view-icon,
.image:hover .view-icon {
display: block;
}