ZorNet.Ru — сайт для вебмастера » HTML и CSS » Эффект серого изображение при помощи 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, и классы, чтоб по умолчанию в коде прописать.

Демонстрация
2018-06-15 Просмотров: 515 Комментарий: (0)

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

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

Оставь свой отзыв

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