» »

Простой Hover эффект CSS для изображений

Простой Hover эффект CSS для изображений

Всегда на сайте хочется сделать оригинальный эффект, где на изображение больше всего подходит. И вот один из простых трюков при помощи CSS. Здесь все очень просто и доступно, где нужно выставлять на картинках, и когда вы наводите клик, то снимок немного приподнимается, что характерно заметно.

Здесь нет не каких заголовков, а только эффект на одну картинку. Все до банальности просто и главное визуально просматривается, ведь элемент виде изображение делает эффект на стилистике

Также применены тени, но только в том случай можно их наблюдать, когда снимки находятся на светлом формате. При наведении подключается designacen-denovasuveg:hover, что поставили тень, также размер на движение эффекта, что теперь можете самостоятельно подключить к своему стилю на сайте.

Красивый hover-эффект для картинок

Простой по оригинальности hover-эффекты для изображений на CSS:

HTML

Код
<img class="designacen-denovasuveg" src="http://zornet.ru/ABVUN/Anisa/hover-effects.png" alt="ZorNet.ru - портал для вебмастера" />

CSS

Код
.designacen-denovasuveg {
  width: 250px;
  height: 279px;
  transform: translateX(0px);
  transition: 0.25s;
  cursor:pointer;
  margin-top: 38px;
  margin-left: 17px;
}

.designacen-denovasuveg:hover {
  transform: translateY(-5px);
  transition: 0.25s;
box-shadow: 2px 8px 20px rgba(76, 72, 72, 0.49);
}

И после этого уже автоматом будет распространено на все картинки, где на прямую задействуют с этим классом, которому был подключен эффект.

Как видим все просто и доступно, здесь мы задали класс designacen-denovasuveg и под него пишем, это ширина и длина изображение, также можно добавить разных стилей, которые отвечают за оформление.

Демонстрация
2019-01-27 Загрузок: 1 Просмотров: 341 Комментарий: (0)

Поделиться в социальных сетях

Материал разместил

Комментарий: 0
avatar