...

Ефекти върху изображения с чист CSS

Няколко прости примера как да добавите ефекти върху изображения, използвайки само чист CSS стил.
преди 3 месеца
css

Няколко идеи за стил, при който прилагаме ефект върху изображение когато мишката е върху него (hover), съчетано със завъртане, скалиране, замъгляване и др. Модерниеят уеб е пълен с анимации. Няколко прости примера как да направим hover ефекти на изображения.

1. Основата

Използвайки следният чист CSS код може да направим всяко изображение да се увеличава когато мишката е върху него

<div class="img-hover-zoom">
  <img src="https://laravel-vue.eu/storage/icon/1/2020/04/20/hvr_1_1587368334.png" alt="алт">
</div>

Просто слагаме изображението в отделен див и прилагаме стиловете върху този див:

/* Контейнера, в който е изображението */
.img-hover-zoom {
  width: 300px;
  height: 300px; /* [1.1] сетнете според нужните ви*/
  overflow: hidden; /* [1.2] скрийте overflowing на вътрешният елемент */
}

/* [2] Свойства на прехода - вид и време */
.img-hover-zoom img {
  transition: transform .5s ease;
}

/* [3] Последно - приложете трансформацията, когато изображението е посочено с мишката */
.img-hover-zoom:hover img {
  transform: scale(1.5); /* 1.5 е увеличение с 50% на изображението */
}

Резултата е просто увеличение при мишка върху изображението

алт

TRANSLATION

задаването на overflow: hidden на контейнера позволява ефекта на увеличение да не излиза от контейнера. За това трябва зададеме и постоянни параметри за височината, а според изискванията и за ширината на контейнера width: 300px; height: 300px; Още за overflow: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

Да добавим и малко ефекти

чрез добавянето на още малко стилове може да разнообразим ефектите. Основата, която ползваме е същата, само ще добавим още по един стил за контейнера и в него ще променяме ефектите.

Бързо увеличение

<div class="img-hover-zoom img-hover-zoom--quick-zoom">
  <img src="https://laravel-vue.eu/storage/icon/1/2020/04/20/hvr_1_1587368334.png" alt="алт">
</div>

и стил

/* Quick-zoom Container */
.img-hover-zoom--quick-zoom img {
  transform-origin: 0 0;
  transition: transform .25s, visibility .25s ease-in;
}
.img-hover-zoom--quick-zoom:hover img {
  transform: scale(2);
}
Резултат:
алт

Увеличение в точка

<div class="img-hover-zoom img-hover-zoom--point-zoom">
  <img src="https://laravel-vue.eu/storage/icon/1/2020/04/20/hvr_1_1587368334.png" alt="алт">
</div>

и стил

/* Point-zoom Container */
.img-hover-zoom--point-zoom img {
  transform-origin: 65% 75%;
  transition: transform 1s, filter .5s ease-out;
}
.img-hover-zoom--point-zoom:hover img {
  transform: scale(5);
}
Резултат:
алт

Увеличение с въртене

<div class="img-hover-zoom img-hover-zoom--zoom-n-rotate">
  <img src="https://laravel-vue.eu/storage/icon/1/2020/04/20/hvr_1_1587368334.png" alt="алт">
</div>

и стил

/* Zoom-n-rotate Container */
.img-hover-zoom--zoom-n-rotate img {
  transition: transform .5s ease-in-out;
}
.img-hover-zoom--zoom-n-rotate:hover img {
  transform: scale(2) rotate(25deg);
}
Резултат:
алт

Увеличение със забавено действие

<div class="img-hover-zoom img-hover-zoom--slowmo">
  <img src="https://laravel-vue.eu/storage/icon/1/2020/04/20/hvr_1_1587368334.png" alt="алт">
</div>

и стил

/* Slow-motion Zoom Container */
.img-hover-zoom--slowmo img {
  transform-origin: 50% 65%;
  transition: transform 5s, filter 3s ease-in-out;
  filter: brightness(150%);
}
.img-hover-zoom--slowmo:hover img {
  filter: brightness(100%);
  transform: scale(3);
}
Резултат:
алт

Увеличение със изсветляване

<div class="img-hover-zoom img-hover-zoom--brightness">
  <img src="https://laravel-vue.eu/storage/icon/1/2020/04/20/hvr_1_1587368334.png" alt="алт">
</div>

и стил

/* Brightness-zoom Container */
.img-hover-zoom--brightness img {
  transition: transform 2s, filter 1.5s ease-in-out;
  transform-origin: center center;
  filter: brightness(50%);
}
.img-hover-zoom--brightness:hover img {
  filter: brightness(100%);
  transform: scale(1.3);
}
Резултат:
алт

Хоризонтално увеличение

<div class="img-hover-zoom img-hover-zoom--zoom-n-pan-h">
  <img src="https://laravel-vue.eu/storage/icon/1/2020/04/20/hvr_1_1587368334.png" alt="алт">
</div>

и стил

/* Horizontal Zoom-n-pan Container */
.img-hover-zoom--zoom-n-pan-h img {
  transition: transform .5s ease-in-out;
  transform: scale(1.4);
  transform-origin: 100% 0;
}
.img-hover-zoom--zoom-n-pan-h:hover img {
  transform: scale(1.5) translateX(30%);
}
Резултат:
алт

Вертикално увеличение

<div class="img-hover-zoom img-hover-zoom--zoom-n-pan-v">
  <img src="https://laravel-vue.eu/storage/icon/1/2020/04/20/hvr_1_1587368334.png" alt="алт">
</div>

и стил

/* Vertical Zoom-n-pan Container */
.img-hover-zoom--zoom-n-pan-v img {
  transition: transform .5s ease-in-out;
  transform: scale(1.4);
  transform-origin: 0 0;
}
.img-hover-zoom--zoom-n-pan-v:hover img {
  transform: scale(1.25) translateY(-30%);
}
Резултат:
алт

Увеличение с изясняване

<div class="img-hover-zoom img-hover-zoom--blur">
  <img src="https://laravel-vue.eu/storage/icon/1/2020/04/20/hvr_1_1587368334.png" alt="алт">
</div>

и стил

/* Blur-zoom Container */
.img-hover-zoom--blur img {
  transition: transform 1s, filter 2s ease-in-out;
  filter: blur(2px);
  transform: scale(1.2);
}
.img-hover-zoom--blur:hover img {
  filter: blur(0);
  transform: scale(1);
}
Резултат:
алт

Увеличение с цветови ефект

<div class="img-hover-zoom img-hover-zoom--colorize">
  <img src="https://laravel-vue.eu/storage/icon/1/2020/04/20/hvr_1_1587368334.png" alt="алт">
</div>

и стил

/* Colorize-zoom Container */
.img-hover-zoom--colorize img {
  transition: transform .5s, filter 1.5s ease-in-out;
  filter: grayscale(100%);
}
.img-hover-zoom--colorize:hover img {
  filter: grayscale(0);
  transform: scale(1.1);
}
Резултат:
алт