ZorNet.Ru — сайт для вебмастера » HTML и CSS » Эффект теней по сторонам изображения в CSS

Эффект теней по сторонам изображения в CSS

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

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

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

Это при проверки на работоспособность:

Это по умолчанию:

Наведен клик на снимок:

Приступаем к установке:

HTML

Код

CSS

Код

.img-korpus .muvtedsa {position:absolute;top:0px;right:0px;bottom:0px;left:0px}
.img-korpus:hover .muvtedsa {
box-shadow:inset 0px 0px 115px rgba(16, 16, 16, 0.95);
-moz-box-shadow:inset 0px 0px 115px rgba(16, 16, 16, 0.95);
-webkit-box-shadow:inset 0px 0px 115px rgba(16, 16, 16, 0.95)
}

.img-korpus .muvtedsa {
transition:all 0.7s ease-in-out;
-webkit-transition:all 0.7s ease-in-out;
-moz-transition:all 0.7s ease-in-out;
-ms-transition:all 0.7s ease-in-out;
-o-transition:all 0.7s ease-in-out;
cursor:pointer;
}

.img-korpus:hover .muvtedsa {
transition:all 0.7s ease-in-out;
-webkit-transition:all 0.7s ease-in-out;
-moz-transition:all 0.7s ease-in-out;
-ms-transition:all 0.7s ease-in-out;
-o-transition:all 0.7s ease-in-out;
}

/****** image hover ******/
.uminations-gtedsamilopan * {-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.uminations-gtedsamilopan {position:relative;width:435px;height:280px;display:inline-block;overflow:hidden;background:#f9f6f6;border:10px solid #f9f6f6;
box-shadow:0px 2px 5px rgba(25, 23, 23, 0.3);-moz-box-shadow:0px 2px 5px rgba(25, 23, 23, 0.3);-webkit-box-shadow:0px 2px 5px rgba(25, 23, 23, 0.3)}
.uminations-gtedsamilopan a {text-decoration:none}
.uminations-gtedsamilopan img {margin:-100px 0px 0px -100px}

Вокруг изображения идет обвод, это сделано для того, чтобы больше выделить границы, где выглядит следующим образом.

Демонстрация

16 Сентября 2018 Просмотров: 1136 Комментариев: (0)

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

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

Kosten

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