Why is overflow in css working with a delay? - html

Question

I'm trying to achieve a drop down cover effect (Not sure how it's really called) with the following code:
.new_events_list {
position: absolute;
width: 26%;
height: 28vh;
background-color: #323642;
cursor: pointer;
}
#new_events_list_effect {
background-color: #ee5f95;
width: 100%;
opacity: 0.5;
top: -100%;
transition: 0.5s;
}
div.new_events_list:hover #new_events_list_effect {
top: 0%;
transition: 0.5s;
}
div.new_events_list:hover img {
filter: grayscale(0.5);
transition: 1s;
}
<div class="new_events_list" style="overflow: hidden;border-radius: 10px;">
<img class="new_events_list" id="photo1" src="https://www.dpreview.com/files/p/articles/7395606096/Google-Photos.jpeg" alt="event_list_1" style=" object-fit: cover; width: 100%;border-radius: 10px;">
<div class="new_events_list" id="new_events_list_effect">
</div>
</div>
The problem that I'm facing is that once you hover over the photo the pink block drops down with the corners visible which only disappear after a second or so. Could anyone explain to me how I could possibly drop down the pink coloured div without the corners being visible?
Thank you very much for your help in advance.

Answer 1

The following code should work:
.new_events_list {
position: relative;
width: 26%;
backgorund-color: black;
border-radius: 10px;
overflow: hidden;
}
.image {
width: 100%;
}
.new_events_list_effect {
position: absolute;
height: 100%;
width: 100%;
background-color: #ee5f95;
opacity: 0.5;
top: -100%;
transition: 0.5s;
border-radius: 10px;
}
.new_events_list:hover .new_events_list_effect {
top: 0%;
transition: 0.5s;
}
<div class="new_events_list">
<img src="https://www.dpreview.com/files/p/articles/7395606096/Google-Photos.jpeg" class="image">
<div class="new_events_list_effect"></div>
</div>