Dynamic Drive CSS Library- CSS3 Image Caption effects

CSS Library

Hosting Discounts

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

CSS Library: Image CSS: CSS3 demos: Here

CSS3 Image Caption effects

Author: Dynamic Drive

The following demos transition HTML's <figcaption> element to reveal captions inside images in a variety of interesting ways. CSS3's transform property is used to position (via translate3d()) and rotate the different components inside a <figure> element. The result is flexible caption effects that work on images of varying dimensions instantly without the need to modify the CSS code.

The effects work on IE10+ and modern versions of other browsers. In IE9 and below, no caption is shown at all with some of the demos.

Demos:

The CSS:

<style>

/*** Default shared CSS ****/

figure.figurefx{
	margin: 0;
	padding: 0;
	display: inline-block;
	position: relative;
	overflow: hidden; /* hide overflowing elements by default */
}

figure.figurefx::before, figure.figurefx::after{ /* create :before and :after pseudo elements that are initially positioned outside canvas */
	content: '';
	width: 100%;
	height: 100%;
	display: block;
	background: black;
	position: absolute;
	opacity: 0.3;
	top: 0;
	left 0;
	-moz-transform: translate3d(0, -100%, 0); /* position elements past bottom of layout */
	-webkit-transform: translate3d(0, -100%, 0);
	transform: translate3d(0, -100%, 0);
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}

figure.figurefx img{
	display: block;
}

figure.figurefx figcaption{
	position: absolute;
	display: block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
	text-align: center;
	background: white;
	padding: 5px;
	z-index: 100;
	width: 100%;
	max-height: 100%;
	overflow: hidden;
	top: 50%;
	left: 0;
	-moz-transform: translate3d(-100%, -50%, 0); /* position caption outside layout horizontally and centered vertically */
	-webkit-transform: translate3d(-100%, -50%, 0);
	transform: translate3d(-100%, -50%, 0);
	opacity: 0;
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}

figure.figurefx figcaption a{
	text-decoration: none;
}

/*** Default slide down panel effect ****/

figure.default:hover::before{
	-moz-transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

figure.default:hover figcaption{
	opacity: 1;
	-moz-transform: translate3d(0, -50%, 0); /* center caption */
	-webkit-transform: translate3d(0, -50%, 0);
	transform: translate3d(0, -50%, 0);
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
	-moz-transition-delay: 0.5s;
	-webkit-transition-delay: 0.5s;
	transition-delay: 0.5s;
}

/*** Dual panels slide up and down effect ****/

figure.dualpanels::after{
	-moz-transform: translate3d(0, 100%, 0); /* position :after pseudo element at bottom of layout initially */
	-webkit-transform: translate3d(0, 100%, 0);
	transform: translate3d(0, 100%, 0);
}

figure.dualpanels:hover::before{
	-moz-transform: translate3d(0, -50%, 0);
	-webkit-transform: translate3d(0, -50%, 0);
	transform: translate3d(0, -50%, 0);
}

figure.dualpanels:hover::after{
	-moz-transform: translate3d(0, 50%, 0);
	-webkit-transform: translate3d(0, 50%, 0);
	transform: translate3d(0, 50%, 0);
}

figure.dualpanels:hover figcaption{
	opacity: 1;
	-moz-transform: translate3d(0, -50%, 0);
	-webkit-transform: translate3d(0, -50%, 0);
	transform: translate3d(0, -50%, 0);
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
	-moz-transition-delay: 0.5s;
	-webkit-transition-delay: 0.5s;
	transition-delay: 0.5s;
}


/*** Dual panels slide up and down effect 2 ****/

figure.dualpanels2::before{
	-moz-transform: translate3d(-100%, 0, 0); /* position :before pseudo element past left edge of layout initially */
	-webkit-transform: translate3d(-100%, 0, 0);
	transform: translate3d(-100%, 0, 0);
}

figure.dualpanels2::after{
	-moz-transform: translate3d(100%, 0, 0); /* position :after pseudo element past right edge of layout initially */
	-webkit-transform: translate3d(100%, 0, 0);
	transform: translate3d(100%, 0, 0);
}

figure.dualpanels2:hover::before{
	-moz-transform: translate3d(-50%, 0, 0);
	-webkit-transform: translate3d(-50%, 0, 0);
	transform: translate3d(-50%, 0, 0);
}

figure.dualpanels2:hover::after{
	-moz-transform: translate3d(50%, 0, 0);
	-webkit-transform: translate3d(50%, 0, 0);
	transform: translate3d(50%, 0, 0);
}

figure.dualpanels2:hover figcaption{
	opacity: 1;
	-moz-transform: translate3d(0, -50%, 0);
	-webkit-transform: translate3d(0, -50%, 0);
	transform: translate3d(0, -50%, 0);
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
	-moz-transition-delay: 0.5s;
	-webkit-transition-delay: 0.5s;
	transition-delay: 0.5s;
}

/*** Push Up effect ****/

figure.pushup img{
	-moz-transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}

figure.pushup figcaption{
	top: 100%;
	opacity: 1;
	-moz-transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

figure.pushup:hover img{
	-moz-transform: translate3d(0, -20px, 0); /* move image up vertically a bit for parallax effect */
	-webkit-transform: translate3d(0, -20px, 0);
	transform: translate3d(0, -20px, 0);
}

figure.pushup:hover figcaption{
	-moz-transform: translate3d(0, -100%, 0); /* move caption up vertically to fully reveal caption */
	-webkit-transform: translate3d(0, -100%, 0);
	transform: translate3d(0, -100%, 0);
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}

/*** Open Reveal effect ****/

figure.openreveal{
	overflow: visible;
	perspective: 2000px;
}

figure.openreveal::before, figure.openreveal::after{
	display: none;
}

figure.openreveal img{
	position: relative;
	z-index: 100;
	-moz-transform-origin: 0 0;
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
	-moz-transform: rotateX(0deg);
	-webkit-transform: rotateX(0deg);
	transform: rotateX(0deg);
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}

figure.openreveal figcaption{
	z-index: 99;
	opacity: 1;
	-moz-transform: translate3d(0, -50%, 0); /* center caption */
	-webkit-transform: translate3d(0, -50%, 0);
	transform: translate3d(0, -50%, 0);
}

figure.openreveal:hover img{
	-moz-transform: rotateX(180deg); /* rotate image to reveal caption underneath */
	-webkit-transform: rotateX(180deg);
	transform: rotateX(180deg);
}

/*** flipreveal Reveal effect ****/

figure.flipreveal{
	overflow: visible;
	perspective: 900px;
}

figure.flipreveal::before, figure.flipreveal::after{
	display: none;
}

figure.flipreveal img{
	position: relative;
	-moz-transform: rotateX(0deg);
	-webkit-transform: rotateX(0deg);
	transform: rotateX(0deg);
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
	z-index: 100;
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

figure.flipreveal figcaption{
	opacity: 1;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 99;
	-moz-transform: rotateX(180deg) translate3d(0,0,0);
	-webkit-transform: rotateX(180deg) translate3d(0,0,0);
	transform: rotateX(180deg) translate3d(0,0,0);
}

figure.flipreveal:hover img{
	-moz-transform: rotateX(180deg);
	-webkit-transform: rotateX(180deg);
	transform: rotateX(180deg);
}

figure.flipreveal:hover figcaption{
	-moz-transform: rotateX(360deg) translate3d(0,0,0);
	-webkit-transform: rotateX(360deg) translate3d(0,0,0);
	transform: rotateX(360deg) translate3d(0,0,0);
}


</style>

<!--[if lte IE 9]>

	<style>
	/* IE9 and below specific CSS */

	figure.figurefx::before, figure.figurefx::after{
		display: none; /* hide pseudo elements, since legacy IE can't transition them */
	}

	</style>

<![endif]-->

The HTML:

<figure class="figurefx default">
	<img src="baby.jpg" alt="An awesome picture">	
	<figcaption>An awesome picture caption! <a href="http://www.dynamicdrive.com">A link</a></figcaption>
</figure>

<figure class="figurefx dualpanels">
	<img src="baby.jpg" alt="An awesome picture">	
	<figcaption>An awesome picture caption! <a href="http://www.dynamicdrive.com">A link</a></figcaption>
</figure>

<figure class="figurefx dualpanels2">
	<img src="baby.jpg" alt="An awesome picture">	
	<figcaption>An awesome picture caption! <a href="http://www.dynamicdrive.com">A link</a></figcaption>
</figure>

<figure class="figurefx pushup">
	<img src="baby.jpg" alt="An awesome picture">	
	<figcaption>An awesome picture caption! <a href="http://www.dynamicdrive.com">A link</a></figcaption>
</figure>

<figure class="figurefx openreveal">
	<img src="baby.jpg" alt="An awesome picture">	
	<figcaption>An awesome picture caption! <a href="http://www.dynamicdrive.com">A link</a></figcaption>
</figure>

<figure class="figurefx flipreveal">
	<img src="baby.jpg" alt="An awesome picture">	
	<figcaption>An awesome picture caption! <a href="http://www.dynamicdrive.com">A link</a></figcaption>
</figure>

Code Info

Rate this code:

Date Posted: 05/28/2015

Revision History: None

Usage Terms: Click here