Оформление секции с фотографией

Пример:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid et tempore quae quas pariatur ratione voluptas inventore. Doloremque soluta quisquam natus perspiciatis.

HTML:

<div class="img-section">
	<img src="photo.jpg" alt="" />	
	<div class="img-data">
		<p>Информация блока</p>
	</div>
</div>

<p>Информация блока</p>

</div>

CSS:

.img-section {
	width: 100%;
	background: linear-gradient(135deg, #337AB7 0%, #337AB7 40%, #FFF 40%, #FFF 100%);
	display: flex;   
	align-items: center;
	margin: 20px 0;
}
.img-section img {
	border: 20px solid rgba(191, 226, 255, 0.8);
	box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.7);
	margin: 40px;
	box-sizing: border-box;
	flex: 0 0 45%;
	width: 45%;
}
.img-section .img-data {
	font-family: Verdana, sans-serif;
	font-size: 16px;
	padding: 20px;
}
@media only screen and (max-width: 700px) {
	.img-section {
		flex-flow: row wrap;
	}
	.img-section .img-data {
		background: #FFF;
		border-bottom: 8px solid #337AB7;
	}
	.img-section img {
		margin: 40px auto;
		flex: 0 0 80%;
		width: 80%;
	}
}

.img-section {

width: 100%;

background: linear-gradient(135deg, #337AB7 0%, #337AB7 40%, #FFF 40%, #FFF 100%);

display: flex;

align-items: center;

margin: 20px 0;

}

.img-section img {

border: 20px solid rgba(191, 226, 255, 0.8);

box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.7);

margin: 40px;

box-sizing: border-box;

flex: 0 0 45%;

width: 45%;

}

.img-section .img-data {

font-family: Verdana, sans-serif;

font-size: 16px;

padding: 20px;

}

@media only screen and (max-width: 700px) {

.img-section {

flex-flow: row wrap;

}

.img-section .img-data {

background: #FFF;

border-bottom: 8px solid #337AB7;

}

.img-section img {

margin: 40px auto;

flex: 0 0 80%;

width: 80%;

}

Пример:

HTML:

CSS:

Смотрите также:

Секция-галерея на GSAP

Анимированный разделитель для секций на CSS

Секция с фотографиями и раскрывающимся их описанием

Добавить комментарий:

Разделы:

Фоновая анимация на JS

Простые решения: