ZorNet.Ru — сайт для вебмастера » HTML и CSS » Прозрачность фонового изображение на CSS

Прозрачность фонового изображение на CSS

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

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

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

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

Так идет при открытии сайта или на вновь созданной странице.

Здесь уже видим трюк, который можно как сделать темнее или прозрачнее.

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

HTML

Код

<ul>
  <li>
  <img alt="Здесь идет описание под изображение, что можно вывести оператором" src="Ссылка на изображение">
  <p>ZorNet.Ru - все для сайта</p>
  </li>
  <li>
  <img alt="Интересные решения вебмастеру для создания интернет ресурса" src="Ссылка на изображение">
  <p>ZorNet - портал для вебмастера</p>
  </li>
</ul>

CSS

Код

ul li{
width: 348px;
height: 315px;
padding: 0 5px;
display: inline-block;
text-align: center;
position: relative;
}

ul li img{
max-width: 100%;
height: 245px;

}

ul li p{
margin: 0;
padding: 20px;
background: #eeeef1;
}

ul li::after{
height: 100%;
content: '';
background: rgba(19, 18, 18, 0.8);
position: absolute;
top: 0;
left: 4px;
right: 4px;
opacity: 0;
}

ul li:hover::after, ul li:hover::before{
opacity: 1;
cursor: pointer;
}

ul li::before{
content: 'Текст при наведении';
position: absolute;
top: calc(50% - 15px);
left: calc(50% - 65px);
color: #f5ebeb;
opacity: 0;
z-index: 10;
}

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

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

07 Ноября 2018 Просмотров: 1033 Комментариев: (0)

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

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

Kosten

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