.option {
    animation: fadeIn 1s ease;
}

@keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}

.media {
  position: relative;
  display: inline-block;
  width: 100%;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* всегда равен картинке */
  background: rgba(0,0,0,0.7);
  color: white;
  display: flex; /* удобно центрировать */
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  opacity: 0; /* изначально невидим */
  transition: opacity 0.3s ease;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
}

/* При наведении скрываем картинку и показываем текст */
.media:hover img {
  opacity: 0;
}

.media:hover .overlay {
  opacity: 1;
}