v2.5.2
Giriş yap

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?

bllk3
522 defa görüntülendi ve 1 kişi tarafından değerlendirildi
1 4

.overlay {

        width: 100%;
        height: 100%;
        position: absolute;
        background-color: #0c0c0c;
        top: 0;
        left: 0;
        opacity: 0.6;
        
    }

    .overlay {
        display: none;
    }

    :hover .overlay {
        display: block;
        
    }
css
Cevap yaz
Cevaplar (4)
bllk3
1188 gün önce

İlyas bey gerçekten teşekkür ederim, display:block; eklediğimde opacityden yararlanamadığımı bilmiyordum. :hovere de opacity ekledim
sizin gösterdiğiniz gibi oldu. Çok teşekkür ediyorum :)

1
#003633
ilyasbilgihan
1188 gün önce

Ö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;
  
}
0
#003632
bllk3
1188 gün önce

Bence gayet açık ufak bir buton çalışması yaptım olay anlamamız için. Bunu kontrol edersen anlayabilirsin beni
butona hover olduğunda farketmişsindir 500 ms gecikmeyle hover oluyor ben bundan bahsettim :)
Aynı butona hover oldugu gibi resime hover uyguladığımda transition ile gecikmeyle hover olmasını istiyorum,
ama ne yazıkki olmuyor hiçbir türlü başka bir yöntemi mevcut büyük ihtimalle:(
https://codepen.io/bllk3/pen/GRjLYaw

0
#003631
onlywhatchess
1189 gün önce

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;
    }
}
0
#003621