Tasarımımda fotoğraflar mevcut, bu fotoğraflara overlay ilave ettim çalışıyor problem yok. Fakat fotoğrafa hover olduğunda transition uygulayamıyorum nasıl yaparım?
.overlay {
width: 100%;
height: 100%;
position: absolute;
background-color: #0c0c0c;
top: 0;
left: 0;
opacity: 0.6;
}
.overlay {
display: none;
}
:hover .overlay {
display: block;
}
Olayı çok anlatmayı başaramamış gibisin ben anladığım türde yardımcı olmaya çalışayım.
Keyframe ile animasyon oluşturmak işini görücektir.
https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp
https://www.w3schools.com/css/css3_animations.asp
<div class="container">
<div class="overlay">
<img src="https://via.placeholder.com/1326x548/efefef" height="100%" width="100%" alt="">
</div>
</div>
html,body{
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
.container{
width: 100%;
height: 100%;
background-color: #333;
}
.overlay{
width: 100%;
height: 100%;
animation-name: fade;
animation-duration: 1.5s;
display: none;
}
.container:hover .overlay{
display: block;
}
@keyframes fade{
from{
opacity: 0;
}
to{
opacity: 1;
}
}