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

Эффект серого изображение при помощи CSS

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

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

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

HTML

Код

<div class="zopsazqukildam derastuko-kantugsa">
  <div>
  <figure> <img src="http://zornet.ru/ABVUN/sarunolas/Deadpoolwastheonlyfunnypartthere_0-fmE_v.jpg" /> </ figure>
  <span>Здесь пишем ключевую фразу zornet.ru</span>
  </div>
  <div>

CSS

Код

.derastuko-kantugsa {
  margin: 9px 8px 0;
  padding: 0;
}
.derastuko-kantugsa:last-child {
  padding-bottom: 57px;
}
.derastuko-kantugsa::after {
  content: '';
  clear: both;
  display: block;
}
.derastuko-kantugsa div {
  position: relative;
  float: left;
  width: 315px;
  height: 217px;
  margin: 0 0 0 17px;
  padding: 0;
}
.derastuko-kantugsa div:first-child {
  margin-left: 0;
}
.derastuko-kantugsa div span {
  position: absolute;
  bottom: -20px;
  left: 0;
  z-index: -1;
  display: block;
  width: 297px;
  margin: 0;
  padding: 0;
  color: #484545;
  font-size: 18px;
  text-decoration: none;
  text-align: center;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  opacity: 0;
}
figure {
  width: 319px;
  height: 196px;
  margin: 0;
  padding: 0;
  background: #e4d9d9;
  overflow: hidden;
}
figure:hover+span {
  bottom: -41px;
  opacity: 1;
}

.zopsazqukildam figure img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  width: 319px;
  height: 210px;
  cursor: pointer;
}
.zopsazqukildam figure:hover img {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}

Если ставить по одному снимку, то код выше представлен, но больше всего вам понадобится стиль в CSS, и классы, чтоб по умолчанию в коде прописать.

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

15 Июня 2018 Просмотров: 1135 Комментариев: (0)

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

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

Kosten

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