Avatar Popout Efekti

6 Şubat 2024

CSS ile yapılanlar serisinde bu yazımda sizlere bir köşeli veya yuvarlak alan içindeki resmin üzerine gelince köşeli ve yuvarlak alanın dışına taşacak uygulamayı anlatmaya çalışacağım.

Köşeli alanlarda popout efekti

Bir kapsayıcı .kapsayici içinde yer alan resmi position: absolute; ve bottom: 0; ile kapsayıcının altına hizalıyoruz. Normal durumda biraz resmi küçültüyoruz. Farenin üzerine geldiğinde resmi büyüttüğümüzde transform: scale(1.4); istediğimiz sonuç ortaya çıktı.

Oval alanlarda popout efekti

Oval alanlarda popout efekti yapmak için köşeliye göre bir fazla kapsayıcı .resim-kabi daha eklememiz gerekiyor. Ovallik kazandırmak için .kapsayici ve .resim-kabi elemanlarına border-radius tanımladık. Bu örnekte farklı olarak resim ve kapsayıcısını da büyüttük. Ayrıca resme gölge de ekledik.

Tek elemanla çözüm

Oval örneğin sadece bir adet HTML elemanı (<img>) ile yapan örnekler de var. https://css-tricks.com/a-fancy-hover-effect-for-your-avatar/ Temani Afif’in yazısı gayet başarılı.

Az eleman kullanması güzel bir avantaj olsa da kodu karışıklığı beni biraz düşündürdü. Siz projenize göre bri tanesini seçip ilerleyebilirsiniz.

Kalın sağlıcakla.

Kaynaklar

HTML Akordiyon bileşeni

HTML Akordiyon bileşeni ve uygulalamarı Devamını oku

Kapsayıcı sorguları (container query)

29 January 2024 tarihinde yayınlandı.

Renk geçişli ve Hareketli kenar çizgileri

22 January 2024 tarihinde yayınlandı.