5 prostych efektów na obrazkach z wykorzystaniem hover

Czas czytania: 3 minut

Animacje aktywowane efektem typu hover (po najechaniu kursorem myszy) są zawsze ciekawym dodatkiem na stronie internetowej. Dzięki rozwiązaniom jakie dało nam CSS3 stały się też o wiele bardziej popularniejsze i prostsze w użyciu. Niemniej zastosowanie takiej animacji wymaga również pewnej wiedzy.

W tym wpisie postaram się przedstawić 5 prostych rozwiązań (efektów na obrazkach), które wystarczy jedynie skopiować by móc zaimplementować / dodać je na swojej stronie internetowej. Poniżej umieszczę też link do opisanej wcześniej animacji powiększenia i pomniejszenia obrazka.

Spis treści

Podstawowe wymiary obrazów

Na początek ustalimy sobie wymiary kontenerów obrazów na, których będziemy pracować.

.obrazek {
  border: 10px solid #fff;  
  float: left;
  height: 300px;
  width: 300px;
  margin: 20px;
  overflow: hidden;
  
  -webkit-box-shadow: 5px 5px 5px #111;
          box-shadow: 5px 5px 5px #111;  
}

Jeżeli chcecie uruchomić animacje wystarczy, że przesuniecie kursor myszy na obrazek. Automatycznie w tedy uruchomi się animacja w CSS.

Przesunięcie obrazka w poziomie – animacja

Poniższy efekt nie będzie wpływać bezpośrednio na wygląd obrazka a jedynie dokona jego przesunięcia (ruchu) odsłaniając niewidoczny fragment. Obrazek dynamicznie przesunie się na boki.

A tak prezentuje się całkowity kod:

HTML

<div class="sidepan obrazek">
<img src="https://aurainweb.pl/wp-content/uploads/2018/03/parasolki.jpg" alt="" class="aligncenter size-full wp-image-8861" />
</div>

CSS

.sidepan img {
  margin: 0px;
  -webkit-transition: margin 1s ease;
     -moz-transition: margin 1s ease;
       -o-transition: margin 1s ease;
      -ms-transition: margin 1s ease;
          transition: margin 1s ease;
}
 
.sidepan img:hover {
  margin-left: -200px;
}

W celu zmiany kierunku przesunięcia wystarczy zmienić wartość margin-left: -200px; na margin-left: 200px;

Przesunięcie obrazka w pionie

Kolejny efekt będzie działał na podobnej zasadzie jak poprzedni z tą różnicą, że po najechaniu kursorem obrazek przesunie się z góry na dół.

<div class="vertpan obrazek">
<img src="https://aurainweb.pl/wp-content/uploads/2018/03/parasolki.jpg" alt="" class="aligncenter size-full wp-image-8861" />
</div>

/*VERTPAN*/
.vertpan img {
  margin-top: 0px;
  -webkit-transition: margin 1s ease;
     -moz-transition: margin 1s ease;
       -o-transition: margin 1s ease;
      -ms-transition: margin 1s ease;
          transition: margin 1s ease;
}
 
.vertpan img:hover {
  margin-top: -200px;
}

Pochylenie obrazka

Dzięki temu efektowi będziemy mogli obrócić ilustrację wraz z ramką. W przykładzie pochylimy obrazek jedynie o 10 stopni.

<div class="poch obrazek">
<img src="https://aurainweb.pl/wp-content/uploads/2018/03/parasolki.jpg" alt="" class="aligncenter size-full wp-image-8861" />
</div>

.poch {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
 
.poch:hover {
  -webkit-transform: rotate(-10deg);
     -moz-transform: rotate(-10deg);
       -o-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
          transform: rotate(-10deg);
}

Transformacja / zmiana wyglądu zdjęcia

Poniższy efekt będzie najbardziej skompilowanym z dotychczasowych – nie tylko obrócimy do o koła osi obraz, ale także dokonamy zamiany kwadratowej ramki w okrąg.

<div class="morph obrazek">
<img src="https://aurainweb.pl/wp-content/uploads/2018/03/parasolki.jpg" alt="" class="aligncenter size-full wp-image-8861" />
</div>

.morph {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
 
.morph:hover {
  border-radius: 50%;
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
}

Zamiana w okrąg / Focus

Podobnie jak w poprzednim przykładzie zmienimy obraz w okrąg – jednak dokonamy tego w podobny sposób jak w starym aparacie fotograficznym. Czyli obraz zostanie umieszczony w czarnej grubej okrągłej ramce.

<div class="focus obrazek">
<img class="aligncenter size-full wp-image-8861" src="https://aurainweb.pl/wp-content/uploads/2018/03/parasolki.jpg" alt="">
</div>

.focus {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
 
.focus:hover {
  border: 70px solid #000;
  border-radius: 50%;
}

Polecane:
https://aurainweb.pl/zoom-czyli-powiekszenie-obrazka/

Źródło:
10 Easy Image Hover Effects You Can Copy and Paste
https://designshack.net/articles/css/joshuajohnson-2/

5 prostych efektów na obrazkach z wykorzystaniem hover – CSS