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

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

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

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

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

Проверено на адаптивность, где все корректно выводит на мобильных аппаратах.

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

HTML

Код

<div class="duneka_sloga">
  <div class="nalosen_opisanu">
  <a href="#" target="_blank">
  <div class="basenu_kuseva"></div>
  <img class="kadesan-kanepus" src="http://zornet.ru/_fr/81/8553887.jpg">
  <div class="asenaku-ganepus kosno-venius">
  <h3 class="nalosen_opisanu-nazvaniye">ZorNet.Ru</h3>
  <p class="dalosen_opisan">ZorNet.Ru — сайт для вебмастера</p>
  </div>
  </a>
  </div>
</div>

<div class="duneka_sloga">
  <div class="nalosen_opisanu">
  <a href="#" target="_blank">
  <div class="basenu_kuseva"></div>
  <img class="kadesan-kanepus" src="http://zornet.ru/_fr/81/5993991.jpg">
  <div class="asenaku-ganepus ganused-top">
  <h3>Всплывающие Ajax</h3>
  <p>Разнообразный дизайн на сплывающие окна</p>
  </div>
  </a>
  </div>
</div>

<div class="duneka_sloga">
  <div class="nalosen_opisanu">
  <a href="#" target="_blank">
  <div class="basenu_kuseva"></div>
  <img class="kadesan-kanepus" src="http://zornet.ru/_fr/81/1202134.jpg">
  <div class="asenaku-ganepus ganused-left">
  <h3>Иконки для форума</h3>
  <p>Категория полностью посвящена</p>
  </div>
  </a>
  </div>
</div>

<div class="duneka_sloga">
  <div class="nalosen_opisanu">
  <a href="#" target="_blank">
  <div class="basenu_kuseva"></div>
  <img class="kadesan-kanepus" src="http://zornet.ru/_fr/81/6652181.jpg">
  <div class="asenaku-ganepus ganused-right">
  <h3>Графика для сайта</h3>
  <p>Это краткое описание</p>
  </div>
  </a>
  </div>
</div>

<div class="duneka_sloga">
  <div class="nalosen_opisanu">
  <a href="#" target="_blank">
  <div class="basenu_kuseva"></div>
  <img class="kadesan-kanepus" src="http://zornet.ru/_fr/81/4644987.jpg">
  <div class="asenaku-ganepus ganused-top ganused-left">
  <h3>Меню для сайта</h3>
  <p>Краткое описание по навигации</p>
  </div>
  </a>
  </div>
</div>

<div class="duneka_sloga">
  <div class="nalosen_opisanu">
  <a href="#" target="_blank">
  <div class="basenu_kuseva"></div>
  <img class="kadesan-kanepus" src="http://zornet.ru/_fr/81/1435171.jpg">
  <div class="asenaku-ganepus ganused-top ganused-right">
  <h3>Иконки групп для сайта</h3>
  <p>Все по дизайну сайта и кнопки для него</p>
  </div>
  </a>
  </div>
</div>

<div class="duneka_sloga">
  <div class="nalosen_opisanu">
  <a href="#" target="_blank">
  <div class="basenu_kuseva"></div>
  <img class="kadesan-kanepus" src="http://zornet.ru/_fr/81/4086068.jpg">
  <div class="asenaku-ganepus kosno-venius ganused-left">
  <h3>Мини профиль для сайта</h3>
  <p>Здесь профили при регистраций</p>
  </div>
  </a>
  </div>
</div>

<div class="duneka_sloga">
  <div class="nalosen_opisanu">
  <a href="#" target="_blank">
  <div class="basenu_kuseva"></div>
  <img class="kadesan-kanepus" src="http://zornet.ru/_fr/81/1530475.jpg">
  <div class="asenaku-ganepus kosno-venius ganused-right">
  <h3>Шаблоны для сайтов</h3>
  <p>Большая коллекция шаблонов сайта</p>
  </div>
  </a>
  </div>
</div>

CSS

Код

.kosnoveniga{
  color: #312f2f;
  text-align: center;
  padding: 0.7em 0;
}

.duneka_sloga{
  padding: 1em 0;
  float: left;
  width: 50%;
}

.duneka_sloga {
  color: #252323;
  text-align: center;
  margin-bottom: 10px;
}

.nalosen_opisanu {
  position: relative;
  width: 70%;
  max-width: 320px;
  margin: auto;
  overflow: hidden;
}

.nalosen_opisanu .basenu_kuseva {
  background: rgba(14, 14, 14, 0.78);
  position: absolute;
  height: 99%;
  width: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  -webkit-transition: all 0.4s ease-in-out 0s;
  -moz-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;
}

.nalosen_opisanu:hover .basenu_kuseva{
  opacity: 1;
}

.kadesan-kanepus{
  width: 100%;
}

.asenaku-ganepus {
  position: absolute;
  text-align: center;
  padding-left: 1em;
  padding-right: 1em;
  width: 100%;
  top: 50%;
  left: 50%;
  opacity: 0;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.nalosen_opisanu:hover .asenaku-ganepus{
  top: 50%;
  left: 50%;
  opacity: 1;
}

.asenaku-ganepus h3{
  color: #fbfafa;
  font-weight: 500;
  letter-spacing: 0.15em;
  margin-bottom: 0.5em;
  text-transform: uppercase;
}

.asenaku-ganepus p{
  color: #fbfafa;
  font-size: 0.8em;
}

.kosno-venius{
  top: 80%;
}

.ganused-top{
  top: 20%;
}

.ganused-left{
  left: 20%;
}

.ganused-right{
  left: 80%;
}

@media screen and (max-width: 640px){
  .duneka_sloga{
  display: block;
  width: 100%;
  }
}

@media screen and (min-width: 900px){
  .duneka_sloga{
  width: 33.33333%;
  }
}

Как поняли, что эффекты наложения изображений на CSS при наведении не так сложны, что изначально может показаться. Ведь здесь мы создали все на чистый HTML и CSS для оригинального появление, где не будем применять JavaScript или библиотеки.

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

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

16 Ноября 2019 Загрузок: 2 Просмотров: 982 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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