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

Эффект наложения изображений 2 варианта CSS

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

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

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

1. Вариант:

HTML

Код

<div class="lotunisam_gunrem">
  <div class="zornet_rusvetsa">
  <img src="http://zornet.ru/Aben/ABGDA/zornet_ru/kersa/zornet.png">
  </div>
  <div class="dekimartan">
  <h2>ZorNet: Создание uCoz</h2>
  <p>Покупка использованного графического процессора может показаться одним из способов уклониться от высоких текущие карты.</p>
  </div>
  </div>

CSS

Код

.lotunisam_gunrem {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 293px;
  height: 261px;
  background: #262626;
  overflow: hidden;
}
.lotunisam_gunrem .zornet_rusvetsa,
.lotunisam_gunrem .dekimartan {
  width: 100%;
  height: 100%;
  position: absolute;
  box-sizing: border-box;
  transition: .5s;
}
.lotunisam_gunrem .zornet_rusvetsa {
  top: 0;
  left: 0;
}
.lotunisam_gunrem:hover .zornet_rusvetsa {
  top: 0;
  left: -100%;
}
.lotunisam_gunrem .zornet_rusvetsa img {
  width: 100%;
}
.lotunisam_gunrem .dekimartan {
  background: #262626;
  top: 0;
  left: 100%;
  padding: 60px 30px;
}
.lotunisam_gunrem:hover .dekimartan {
  top: 0;
  left: 0%;
}
.lotunisam_gunrem .dekimartan h2 {
  color: #effb92;
  text-align: center;
  margin: 0;
  padding: 0 0 5px;
  border-bottom: 2px solid #f1ecec;
}
.lotunisam_gunrem .dekimartan p {
  margin: 14px 0 0;
  color: #fbf2f2;
  text-align: justify;
  cursor: pointer;
}

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

2. Вариант:

HTML

Код

CSS

Код

figure.klasenu_tnilagem img {
  max-width: 100%;
  opacity: 1;
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
}
figure.klasenu_tnilagem > div {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: 100%;
  position: absolute;
}
figure.klasenu_tnilagem > div a {
  color: #ebebf1;
}
figure.klasenu_tnilagem > div a i {
  font-size: 49px;
  opacity: 0;
  top: 49%;
  position: relative;
  -webkit-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  display: inline-block;
}
figure.klasenu_tnilagem > div a i.left-icon {
  -webkit-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
}
figure.klasenu_tnilagem > div a i.right-icon {
  -webkit-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
}
figure.klasenu_tnilagem > div::before {
  position: absolute;
  top: 29px;
  right: 49%;
  bottom: 29px;
  left: 49%;
  border-left: 1px solid rgba(236, 232, 232, 0.8);
  border-right: 1px solid rgba(236, 232, 232, 0.8);
  content: '';
  opacity: 0;
  background-color: #f0f0f5;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
figure.klasenu_tnilagem:hover img {
  opacity: 0.35;
}
figure.klasenu_tnilagem:hover > div i {
  opacity: 0.9;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
figure.klasenu_tnilagem:hover > div i.left-icon {
  -webkit-transform: translate3d(-25%, -50%, 0);
  transform: translate3d(-25%, -50%, 0);
}
figure.klasenu_tnilagem:hover > div i.right-icon {
  -webkit-transform: translate3d(25%, -50%, 0);
  transform: translate3d(25%, -50%, 0);
}
figure.klasenu_tnilagem:hover > div::before {
  background: rgba(255, 255, 255, 0);
  left: 28px;
  right: 28px;
  opacity: 1;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

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

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

03 Марта 2018 Просмотров: 1695 Комментариев: (0)

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

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

Kosten

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