05 Kwiecień 2023Efektywne zdjęcia na stronę

Koniec z nudnymi miniaturami! Zobacz jak w ciekawszy sposób prezentować zdjęcia na stronie.

Poniżej znajduje się efekt "koloryzacji" zdjęcia po najechaniu na nie myszką.
Efekt ten został uzyskany jedynie za pomocą styli CSS. 

Zaledwie kilka linijek kodu CSS ożywi nam obraz całej strony, a przy tym bez zbędnych "fajerwerków" uczyni ją atrakcyjniejszą!

W bardzo prosty sposób możemy odwrócić ten efekt poprzez podmianę ":hover" z linii 9 do linii 1 ;)

---

Kod CSS3

.css-grayscale {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  filter: gray;
}
.css-grayscale {
  -webkit-transition: all .6s ease;
}
.css-grayscale:hover {
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
  -webkit-transition: all .6s ease;
}

Kod HTML

‹div class="row"›
  ‹div class="col-xs-4"›
     ‹img class="img-responsive css-grayscale" src="image1.jpg" width="273" height="150" loading="lazy" /›
  ‹/div›
  ‹div class="col-xs-4"›
     ‹img class="img-responsive css-grayscale" src="image2.jpg" width="273" height="150" loading="lazy" /›
  ‹/div›
  ‹div class="col-xs-4"›
     ‹img class="img-responsive css-grayscale" src="image3.jpg" width="273" height="150" loading="lazy" /›
  ‹/div›
‹/div›