Efekler

v5 sistemimizde sizler için önceden hazırlanmış efekleri kolaylık ile kullanabilirsiniz.

Kullanım Şekli#

Kapsayıcıya effect-wrapper classı eklenmeli. Sonrasında
Efektin uygulanacağı elemente beğendiniz efektin classı eklenmeli.

Örnek Kullanım#

Görselin hover durumunda yakınlaşması

<div class="effect-wrapper">
  ...
  <div class="overflow-hidden">
      <img src="product image link" class="hover-scale">
  </div>
  ...
</div>

Görünmez elementin hover durumunda gösterimi (display)#

Ürün Adı

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

d-none hover-block

Görünen elementin hover durumunda gizlenmesi (display)#

%10

Ürün Adı

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

hover-none

Görünmez elementin hover durumunda gösterimi (visible)#

%10

Ürün Adı

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

hover-visible

Görünen elementin hover durumunda gizlenmesi (visible)#

%10

Ürün Adı

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

hover-hidden

Görselin hover durumunda yakınlaşması#

.hover-scale classdan bir önceki kapsayıcıda.overflow-hidden olmasında fayda var.

%10

Ürün Adı

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

hover-scale

Görselin hover durumunda yakınlaşması (lg)#

.hover-scale-lg classdan bir önceki kapsayıcıda.overflow-hidden olmasında fayda var.

%10

Ürün Adı

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

hover-scale-lg

Elementin hover durumunda yukarı hareket işlemi#

%10

Ürün Adı

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

hover-to-up

Elementin hover durumunda aşağı hareket işlemi#

%10

Ürün Adı

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

hover-to-down

Elementin hover durumunda sol yöne hareket işlemi#

%10

Ürün Adı

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

hover-to-left

Elementin hover durumunda sağ yöne hareket işlemi#

%10

Ürün Adı

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

hover-to-right

Elementin hover durumunda gölgelenmesi#

%10

Ürün Adı

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

hover-shadow

Elementin hover durumunda arkaplan şeffaflık alması#

%10

Ürün Adı

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

hover-bg-transparent

Elementin hover durumunda ana rengi alması#

%10

Ürün Adı

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

hover-color-primary

Elementin hover durumunda arkaplanı ana rengi alması#

%10

Ürün Adı

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

hover-bg-primary

Elementin hover durumunda dış çizgi ana rengi alması#

%10

Ürün Adı

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

hover-border-primary

Görselin hover durumunda siyah beyaz olması#

%10

Ürün Adı

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

hover-grayscale

Görselin hover durumunda renklenmesi#

%10

Ürün Adı

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

hover-grayscale-reverse

Görselin hover durumunda bulanık olması#

%10

Ürün Adı

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

hover-blur

Görselin hover durumunda bulanıklık kaybolması#

%10

Ürün Adı

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

hover-blur-reverse

Görselin hover durumunda görünür olması#

%10

Ürün Adı

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

hover-opacity

Görselin hover durumunda şeffaf olması#

%10

Ürün Adı

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

hover-opacity-reverse

Elementin hover durumunda animasyonsuz uygulanması (transition: none)#

%10

Ürün Adı

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

<herhangi bir efekt> hover-transition-none