Выдвигающееся описание для фотографий

Пример:

HTML:

<figure class="card info-bottom">
	<img src="/demo/640/TimHill-1.jpg" alt="" />
	<figcaption>
		<span class="info">
			<h3>Заголовок фото</h3>
			<span>Описание фото</span>
		</span>
	</figcaption>
</figure>

<h3>Заголовок фото</h3>

<span>Описание фото</span>

</span>

</figcaption>

</figure>

Где: info-bottom - вывод описания снизу.

Другие варианты: info-top - вывод описания сверху, info-left - слева, info-right - справа.

CSS:

figure.card * {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}			
figure.card {
	position: relative;
	max-width: 100%;
	display: inline-block;
	border: 6px solid #BFE2FF;
	background: #BFE2FF;
	box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.1);
	overflow: hidden;
	margin: 15px 0;
	font-size: 0;
	border-radius: 8px;
}
figure.card img {
	transition: all 300ms;
	position: relative;
	top: 0;
	left: 0;
	border-radius: 8px;
	will-change: transform;	
}
figure.card:hover img {
	transition: all 700ms;
	transform: scale(1.1);
}
figure.card figcaption {
	position: absolute;
	background: #BFE2FF;
	transition: transform 300ms;
	padding: 12px;
}
figure.card:hover figcaption {
	transform: translateY(0);
}
figure.info-bottom:hover img {
	top: -40px;
}
figure.info-bottom figcaption {
	bottom: 0;
	transform: translateY(100%);
	border-top: 6px solid #BFE2FF;
}
figure.info-top:hover img {
    top: 40px;
}
figure.info-top figcaption {
	top: 0;
	transform: translateY(-100%);
	border-bottom: 6px solid #BFE2FF;
}
figure.info-bottom figcaption, 
figure.info-top figcaption {
	width: 100%;
}
figure.info-left:hover img {
	left: 90px;
}
figure.info-left figcaption {
	left: 0;
	top: 0;
	transform: translateX(-180px);
	border-right: 6px solid #BFE2FF;
}
figure.info-right:hover img {
	left: -90px;
}
figure.info-right figcaption {
	right: 0;
	top: 0;
	transform: translateX(180px);
	border-left: 6px solid #BFE2FF;
}
figure.info-left figcaption, 
figure.info-right figcaption {
	width: 180px;
	height: 100%;
}
figure.card figcaption .info span {
	font-size: 16px;
	display: block;
}
figure.card figcaption .info h3 {
	font-size: 18px;
	display: inline-block;
	font-weight: bold;
	margin-bottom: 4px;
	padding-bottom: 4px;
	border-bottom: 1px solid #337AB7;
}

figure.card * {

box-sizing: border-box;

margin: 0;

padding: 0;

}

figure.card {

position: relative;

max-width: 100%;

display: inline-block;

border: 6px solid #BFE2FF;

background: #BFE2FF;

box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.1);

overflow: hidden;

margin: 15px 0;

font-size: 0;

border-radius: 8px;

}

figure.card img {

transition: all 300ms;

position: relative;

top: 0;

left: 0;

border-radius: 8px;

will-change: transform;

}

figure.card:hover img {

transition: all 700ms;

transform: scale(1.1);

}

figure.card figcaption {

position: absolute;

background: #BFE2FF;

transition: transform 300ms;

padding: 12px;

}

figure.card:hover figcaption {

transform: translateY(0);

}

figure.info-bottom:hover img {

top: -40px;

}

figure.info-bottom figcaption {

bottom: 0;

transform: translateY(100%);

border-top: 6px solid #BFE2FF;

}

figure.info-top:hover img {

top: 40px;

}

figure.info-top figcaption {

top: 0;

transform: translateY(-100%);

border-bottom: 6px solid #BFE2FF;

}

figure.info-bottom figcaption,

figure.info-top figcaption {

width: 100%;

}

figure.info-left:hover img {

left: 90px;

}

figure.info-left figcaption {

left: 0;

top: 0;

transform: translateX(-180px);

border-right: 6px solid #BFE2FF;

}

figure.info-right:hover img {

left: -90px;

}

figure.info-right figcaption {

right: 0;

top: 0;

transform: translateX(180px);

border-left: 6px solid #BFE2FF;

}

figure.info-left figcaption,

figure.info-right figcaption {

width: 180px;

height: 100%;

}

figure.card figcaption .info span {

font-size: 16px;

display: block;

}

figure.card figcaption .info h3 {

font-size: 18px;

display: inline-block;

font-weight: bold;

margin-bottom: 4px;

padding-bottom: 4px;

border-bottom: 1px solid #337AB7;

}

Пример:

Фото 1

Фото 2

Фото 3

Фото 4

HTML:

CSS:

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

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

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