Mouse üzerine gelince büyüyen yuvarlak köşeli çember

2
1197
Görüntülenme

Css3 transitions, transforms ve opacity kullanarak hazırladığım bir hover efekti. Artık tamamdır  deyip yayınlamaya karar verdiğim ilk örnekte mouse ile resimlerin üzerinde gezdiğinizde resimlerin etrafındaki beyaz border hızlı bir şekilde turuncu rengine dönüp resmin olduğu çerçevede biraz hızlı büyüyordu. Bu şekilde baktığımda bana merceği anımsatıyordu. Aslında fena da değildi. Css kodlarda .resim kısmını bularak bu bölümdeki transition hızlarını düşürüp yükseltebilirsiniz.

Css3 hover  efekti kullanarak hazırladığım demoda mouse ile resimlerin üstüne geldiğinizde  görünmeyen resim başlıkları yavaşça netleşerek resim çerçevesinin ortasında  durup net bir görüntüye kavuşuyor. Mouseyi çektiğinizde ise tekrar yavaşça saydamlaşıp aşağıya doğru inerken kayboluyor. Aslında  resimlerin başlıkları da çerçeve dışında  değil. Resim çerçevesinin tabanından 30px daha yukarda.  Opacity değeri  sıfır  olarak ayarladığım için ekranda görünmüyorlar.

Css3 hover efekti ile alakalı bir diğer konu mouse ile reismlerin üzerine geldiğinizde resimde  biraz kararma oluşuyor. Bu kararmaya neden olan svg formatında css kodlara  eklenmiş saydam bir dosya. Resmin üzerine geldiğinizde hover efekti sayesinde görünüyor ve mouseyi çektiğinizde tekrar kayboluyor.

yuvarlak div hazırlama

Kullanım

  • Head etiketleri arasına eklemeniz gereken bölüm.

Css :

 

 

  • Body etiketleri arasına eklemeniz gereken bölüm.

Html :

 

2 YORUMLAR

CEVAP VER

Lütfen yorumunuzu yazın.
Lütfen İsminizi bu alana yazın.