Hello reader's, In this blog I have created an image caption over the image using CSS3 transition properties over the image when hover.
As CSS3 we all know helps in creating an effective animated website using various transition properties ,so by using this I have tried to create an example.
Below in my example , I have just tried to create an image caption with text whenever we hover over the image by simply using CSS3.
In the HTML code , I have taken an unordered list (ul) containing <li> inside it with a caption div with a text. In this , I have taken 6 images showing the transition and when we hover over the caption div , a blur div gets open containing the content-text in it.
The HTML Code is given below :-
<!DOCTYPE html>
<html>
<head>
<title>Image Caption Animation Using CSS3</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container">
<div class="image-section">
<h1>Image Caption Animation Using CSS3</h1>
<ul class="caption-style-1">
<li> <img src="images/chaps_1x.jpg" alt="">
<div class="caption">
<div class="blur"></div>
<div class="caption-text">
<h1>Amazing Caption</h1>
<p>Whatever It Is - Always Awesome</p>
</div>
</div>
</li>
<li><img src="images/everycowboy_dribbbleready_shot.jpg" alt="">
<div class="caption">
<div class="blur"></div>
<div class="caption-text">
<h1>Amazing Caption</h1>
<p>Whatever It Is - Always Awesome</p>
</div>
</div>
</li>
<li> <img src="images/ithinkican_01.jpg" alt="">
<div class="caption">
<div class="blur"></div>
<div class="caption-text">
<h1>Amazing Caption</h1>
<p>Whatever It Is - Always Awesome</p>
</div>
</div>
</li>
<li> <img src="images/m.jpg" alt="">
<div class="caption">
<div class="blur"></div>
<div class="caption-text">
<h1>Amazing Caption</h1>
<p>Whatever It Is - Always Awesome</p>
</div>
</div>
</li>
<li> <img src="images/raspberry.jpg" alt="">
<div class="caption">
<div class="blur"></div>
<div class="caption-text">
<h1>Amazing Caption</h1>
<p>Whatever It Is - Always Awesome</p>
</div>
</div>
</li>
</li>
<li> <img src="images/sketch_1x.jpg" alt="">
<div class="caption">
<div class="blur"></div>
<div class="caption-text">
<h1>Amazing Caption</h1>
<p>Whatever It Is - Always Awesome</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
In the CSS code , I have set position relative to the li of the caption div and had used overflow:hidden property which hides the text.
I have set the position absolute and the transition property to ease-in-out for 0.45s to the caption class .
To the blur class, I have set the background-color with position absolute with fixed height and width .
In the caption-text class, I have set the z-index property as 10 with position absolute.
Thus by applying transition property over caption div we have generated an hover effect.
Below is the CSS Code :-
.image-section{
margin: auto;
}
.image-section h1{
color: #000;
font-size: 40px;
font-weight: 600;
text-align: center;
text-transform: uppercase;
}
.caption-style-1 {
list-style-type: none;
margin: 0px;
padding: 0px;
}
.caption-style-1 li {
float: left;
padding: 0px;
position: relative;
overflow: hidden;
}
.caption-style-1 li:hover .caption {
opacity: 1;
}
.caption-style-1 img {
margin: 0px;
padding: 0px;
float: left;
z-index: 4;
}
.caption-style-1 .caption {
cursor: pointer;
position: absolute;
opacity: 0;
-webkit-transition: all 0.45s ease-in-out;
-moz-transition: all 0.45s ease-in-out;
-o-transition: all 0.45s ease-in-out;
-ms-transition: all 0.45s ease-in-out;
transition: all 0.45s ease-in-out;
}
.caption-style-1 .blur {
background-color: rgba(0,0,0,0.65);
height: 300px;
width: 400px;
z-index: 5;
position: absolute;
}
.caption-style-1 .caption-text h1 {
text-transform: uppercase;
font-size: 24px;
}
.caption-style-1 .caption-text {
z-index: 10;
color: #fff;
position: absolute;
width: 400px;
}
Conclusion :-
Hence, I have created an animated caption over the image on hover effect using CSS3 transition property.
Note :- The following example will run on the latest browsers efficiently such as on Safari 3.2+, Chrome, Firefox 4+, Opera 10.5+, and IE 10 .
0 Comment(s)