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

Самый распространенный эффект наложение полупрозрачного слоя на изображение, которое работает при наведении на картинку при помощи CSS. Давайте рассмотрим самый популярный эффект, где можно увидеть на изображение, это будет фон, который можно сделать как не прозрачным, так и полупрозрачным. Для этого в стилях выставим элемент opacity: 0.8, который будет отвечать за эту функцию. У нас выставлено 0.8, что означает, что почти непрозрачный фон идет, что здесь сам веб-разработчик поставит заданные значение, которые посчитает нужными для сайта.

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

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

HTML

<h2>Навести клик на картинку</h2>
<div class="container">
 <a href="#">
  <span>
   <p>
     <strong>Bill</strong> Freakin' <strong>Murray!</strong>
   </p>
  </span>
  <img src="http://fillmurray.com/250/250"></img>
 </a>
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans:800,400);

html {
	background: rgba(0, 0, 0, 0.8);
}

.container {
	position: relative;
	box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.025),
		2px 2px 5px 2px rgba(0, 0, 0, 0.25) inset;
	margin: 30px auto;
	border: 10px solid #fff;
	font-size: 1em;
	overflow: hidden;
	width: 300px;
}

.container img {
	display: block;
	width: 100%;
	margin: 0 auto;
	position: relative;
	z-index: -2;
}

.container a {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
}

.container a span {
	display: block;
	background: rgba(42, 182, 145, 0.95);
	color: #fff;
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 0;
	overflow: hidden;
	opacity: 100;
	transition: all 0.2s ease-out;
	z-index: -1;
}

.container a:hover span {
	height: 100%;
	opacity: 100;
}

.container p {
	text-align: center;
	margin: 135px 0;
	font-family: "Open Sans", sans-serif;
	letter-spacing: 1px;
}

h2 {
	text-align: center;
	color: #fff;
	font-family: "Open Sans", sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 30px;
	text-shadow: 16px 16px 1px rgba(0, 0, 0, 0.75);
}