Простой Hover эффект CSS для изображений
 | |
| Всегда на сайте хочется сделать оригинальный эффект, где на изображение больше всего подходит. И вот один из простых трюков при помощи CSS. Здесь все очень просто и доступно, где нужно выставлять на картинках, и когда вы наводите клик, то снимок немного приподнимается, что характерно заметно. Здесь нет не каких заголовков, а только эффект на одну картинку. Все до банальности просто и главное визуально просматривается, ведь элемент виде изображение делает эффект на стилистике Также применены тени, но только в том случай можно их наблюдать, когда снимки находятся на светлом формате. При наведении подключается designacen-denovasuveg: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 и под него пишем, это ширина и длина изображение, также можно добавить разных стилей, которые отвечают за оформление. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |