Don't forget put the correct image!
See Demo Below
Simple Caption
Full Caption
We need to learn more about HTML5 and CSS3.
Fade Caption
We need to learn more about HTML5 and CSS3.
This is rotate caption
We need to learn more about HTML5 and CSS3.
Scale Caption
We need to learn more about HTML5 and CSS3.<!DOCTYPE html>
<html>
<head>
<title>Image Caption with CSS3</title>
<style>
html, body, div, span, h1, h2, h3, h4, h5, h6, p{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* Style */
#mainwrapper {
font: 10pt normal Arial, sans-serif;
height: auto;
margin: 80px auto 0 auto;
text-align: center;
width: 660px;
}
/* Image Box Style */
#mainwrapper .box {
background:#3EFD00;
border: 5px solid #fff;
cursor: pointer;
height: 182px;
float: left;
margin: 5px;
position: relative;
overflow: hidden;
width: 200px;
-webkit-box-shadow: 1px 1px 1px 1px #ccc;
-moz-box-shadow: 1px 1px 1px 1px #ccc;
box-shadow: 1px 1px 1px 1px #ccc;
}
#mainwrapper .box img {
position: absolute;
left: 0;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
/* Caption Common Style */
#mainwrapper .box .caption {
background-color: rgba(0,0,0,0.8);
position: absolute;
color: #fff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;
}
/** Caption 1: Simple **/
#mainwrapper .box .simple-caption {
height: 30px;
width: 200px;
display: block;
bottom: -30px;
line-height: 25pt;
text-align: center;
}
/** Caption 2: Full Width & Height **/
#mainwrapper .box .full-caption {
width: 170px;
height: 170px;
top: -200px;
text-align: left;
padding: 15px;
}
/** Caption 3: Fade **/
#mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption {
opacity: 0;
width: 170px;
height: 170px;
text-align: left;
padding: 15px;
}
/** Caption 4: Slide **/
#mainwrapper .box .slide-caption {
width: 170px;
height: 170px;
text-align: left;
padding: 15px;
left: 200px;
}
/** Caption 5: Rotate **/
#mainwrapper #box-5.box .rotate-caption {
width: 170px;
height: 170px;
text-align: left;
padding: 15px;
top: 200px;
-moz-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
#mainwrapper .box .rotate {
width: 200px;
height: 400px;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
/** Caption 6: Scale **/
#mainwrapper .box .scale-caption h3, #mainwrapper .box .scale-caption p {
position: relative;
left: -200px;
width: 170px;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
#mainwrapper .box .scale-caption h3 {
-webkit-transition-delay: 300ms;
-moz-transition-delay: 300ms;
-o-transition-delay: 300ms;
-ms-transition-delay: 300ms;
transition-delay: 300ms;
}
#mainwrapper .box .scale-caption p {
-webkit-transition-delay: 500ms;
-moz-transition-delay: 500ms;
-o-transition-delay: 500ms;
-ms-transition-delay: 500ms;
transition-delay: 500ms;
}
/** Simple Caption :hover Behaviour **/
#mainwrapper .box:hover .simple-caption {
-moz-transform: translateY(-100%);
-o-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
opacity: 1;
transform: translateY(-100%);
}
/** Full Caption :hover Behaviour **/
#mainwrapper .box:hover .full-caption {
-moz-transform: translateY(100%);
-o-transform: translateY(100%);
-webkit-transform: translateY(100%);
opacity: 1;
transform: translateY(100%);
}
/** Fade Caption :hover Behaviour **/
#mainwrapper .box:hover .fade-caption, #mainwrapper .box:hover .scale-caption {
opacity: 1;
}
/** Slide Caption :hover Behaviour **/
#mainwrapper .box:hover .slide-caption {
background-color: rgba(0,0,0,1) !important;
-moz-transform: translateX(-100%);
-o-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
opacity: 1;
transform: translateX(-100%);
}
#mainwrapper .box:hover img#image-4 {
-moz-transform: translateX(-100%);
-o-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
opacity: 1;
}
/** Rotate Caption :hover Behaviour **/
#mainwrapper .box:hover .rotate {
background-color: rgba(0,0,0,1) !important;
-moz-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
/** Scale Caption :hover Behaviour **/
#mainwrapper .box:hover #image-6 {
-moz-transform: scale(1.4);
-o-transform: scale(1.4);
-webkit-transform: scale(1.4);
transform: scale(1.4);
}
#mainwrapper .box:hover .scale-caption h3, #mainwrapper .box:hover .scale-caption p {
-moz-transform: translateX(200px);
-o-transform: translateX(200px);
-webkit-transform: translateX(200px);
transform: translateX(200px);
}
</style>
</head>
<body>
<div id="mainwrapper">
<!-- Image Caption 1 -->
<div id="box-1" class="box">
<img id="image-1" src="images/1.jpg"/>
<span class="caption simple-caption">
<p>Simple Caption</p>
</span>
</div>
<!-- Image Caption 2 -->
<div id="box-2" class="box">
<img id="image-2" src="images/1.jpg"/>
<span class="caption full-caption">
<h3>Full Caption</h3>
<p>We need to learn more about HTML5 and CSS3.</p>
</span>
</div>
<!-- Image Caption 3 -->
<div id="box-3" class="box">
<img id="image-3" src="images/1.jpg"/>
<span class="caption fade-caption">
<h3>Fade Caption</h3>
<p>We need to learn more about HTML5 and CSS3.</p>
</span>
</div>
<!-- Image Caption 4 -->
<div id="box-4" class="box">
<img id="image-4" src="images/1.jpg"/>
<span class="caption slide-caption">
<h3>Slide Caption</h3>
<p>We need to learn more about HTML5 and CSS3.</p>
</span>
</div>
<!-- Image Caption 5 -->
<div id="box-5" class="box">
<div class="rotate">
<img id="image-5" src="images/1.jpg"/>
<span class="caption rotate-caption">
<h3>This is rotate caption</h3>
<p>We need to learn more about HTML5 and CSS3.</p>
</span>
</div>
</div>
<!-- Image Caption 6 -->
<div id="box-6" class="box">
<img id="image-6" src="images/1.jpg"/>
<span class="caption scale-caption">
<h3>Scale Caption</h3>
<p>We need to learn more about HTML5 and CSS3.</p>
</span>
</div>
</div>
</body>
</html>
1 comment:
Many useful for it !
Post a Comment