Təmiz CSS-da 8 faydalı imkan: 2) İmage zoom on hover

07.03.2019 0 PAYLAŞIM 212 OXUNMA

#Step IT Academy tərəfindən təqdim olunur  





    CSS texnologiyasında 8 faydalı həllər barədə olan məqalə seriyasına davam edirik.

Öncəki hissə:

1) «Yapışqan» footer



2) İmage Zoom on Hover

    Belə effekt kliklənəbilən şəkilə fikir cəlb etmək üçün çox faydalıdır. İstifadəçi mouse-u şəkilin üzərinə gətirərkən, şəkil azca böyüyür, və üstəlik böyümə crope-vari effekt ilə baş verdiyi üçün şəkilin ümumi tutduğu yerin həcmində heç bir dəyişiklik baş vermir. 

    Effekti yaratmaq üçün bizə vrapper div lazımdır, hansınınla ki biz img teqini HTML-də əhatə etməliyik.

    Həmçinin effektin düzgün işləməsi üçün elementə  width və height verib,  overflow parametrini hidden olaraq təyin etmək lazımdır. Bundan sonra siz istənilən tip transformasiya istifadə edə bilərsiniz.