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;
}
Öncelikle karşılaştığın sorunun neye dayandığını belirtmek isterim.
Hata 1) Overlay'i display block ile görünür kılmak istersen opacity sinden yararlanamazsın.
Hata 2) Overlay display block olduğunda img nin üzerine çıktığından artık img ye hover olmamış olunur ve sonsuz bir döngü başlar. ( tabi ::hover değerini img ye uyguladıysan )
Aşağıda çalışır bir örnek mevcut, iyi çalışmalar.
<div class="image-with-overlay">
<div class="overlay"></div>
<img src="https://picsum.photos/300/300" alt="Overlay image" widht="300" height="300">
</div>
.image-with-overlay {
position: relative;
width: 300px;
height: 300px;
}
.image-with-overlay .overlay {
position: absolute;
width: 100%;
height: 100%;
background: #0c0c0c;
opacity: 0;
transition: .5s opacity;
}
.image-with-overlay:hover .overlay {
opacity: .6;
}