Logoya hover efekti nasıl veririm?

https://volkanatabey.com.tr adresli sitemin logosunun üzerine gelince fotoğrafım çıkıyor. Ancak ben bunu görsel bir şekilde geçiş istiyorum nasıl efek veririm değişim sırasında?

https://tympanus.net/Tutorials/Circl...ts/index3.html

https://tympanus.net/Tutorials/Circl...ts/index4.html

Geçiş dediğiniz keyframe animation ile fade tadında efektler vermek sanırım? Çünkü zaten :hover tanımını yapmışsınız.

Şöyle ki;

@keyframes efektAdiniz{
from{
opacity:0;
}to{
opacity:1;
}
}

Gibi bir efekt oluşturduktan sonra;

.logo:hover{
animation: efektAdiniz 3s forwards; /* 3s, 3 saniye anlamına gelmektedir. */
}

Efekti logonuzun bulunduğu classa özellik olarak ekleyebilirsiniz... (Şu sayfaya bakmanızda fayda var; https://www.w3schools.com/css/css3_animations.asp)

bunları nasıl uyguluyoruz hocam kodlarına nasıl ulaşırım?


teşekkür ederim hocam biraz uğraşayım.

kaynağı görüntüle diyin az bir bootstrap bilgisi ile halledilebilir sanırım.