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

2
682
views

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 :

 

Aranan kelimeler:

  • fare ile üstüne gelindiğinde yavaşça büyüyen resim
  • excellde Fare Üzerine Geldiğinde Büyüyen Resim
  • resmin üzerine gelince büyümesi html
  • resmin üstüne gelince büyüyen kod
  • mouse ile fotoğrafın üzerine gelince büyümesi
  • mause reme geldiğinde büyüme
  • maus gelince büyüme
  • html resmin üzerine gelince büyümesi
  • html remin uzerine gelince buyumesi
  • fotoğraf üzeirne gelince büyüme excel
1 oy (No Ratings Yet)
Loading...
Önceki İçerikHradShrinker -Aşağıya indirince küçülen div
Sonraki İçerikGamePress

1983 doğumlu, olmayan bir çocuk babası, espirili ve kendini cana yakın zanneden biri işte. Daha ne olsun ?

Paylaş

2 YORUMLAR

CEVAP VER

Please enter your comment!
Please enter your name here