Account Deleted
*,
*::after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
display: grid;
place-items: center;
min-height: 100svh;
background: #1B1D36;
}
.image-container {
position: relative;
width: 500px;
border-radius: 1.5rem;
overflow: hidden;
}
img {
display: block;
width: 100%;
}
.image-container::after {
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
background: rgba(234, 179, 8, .3);
z-index: 9;
transition: opacity .3s linear;
}
.image-container:hover::after {
opacity: 1;
}
Here's a simple piece of code that will give you the desired effect for the hover on the image.
Marked as helpful
@dpiskov
Posted
@Benjihunt97 Thanks a lot! I tried it out and it works perfectly, thank you! I still need to take my time with it and try to really understand what's going in the background and understand how the code works.
Account Deleted
@dpiskov your welcome, and you can look up each piece of code to understand it better. If you have any questions I'd be more than happy to help you out.