Почему переполнение в css работает с задержкой?

Question

Я пытаюсь добиться эффекта раскрывающегося списка (не знаю, как он на самом деле называется) с помощью следующего кода:

.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>

Проблема, с которой я сталкиваюсь, заключается в том, что когда вы наводите курсор мыши на фотографию, розовый блок падает с видимыми углами, которые исчезают только через секунду или около того.,Может ли кто-нибудь объяснить мне, как я могу опустить розовый цвет div без видимых углов?Заранее большое спасибо за помощь.

Answer 1

Следующий код должен работать:

.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>