How to solve css issue to display image caption? - html

Question

I want to display some image with caption.By default its showing image only but I want to display image with caption by default.I am giving my css and html code below :
<style type="text/css">
.caption-style-1{
list-style-type: none;
margin: 0px;
padding: 0px;
}
.caption-style-1 li{
float: left;
padding: 0px;
position: relative;
overflow: hidden;
margin-right:5px;
}
.caption-style-1 li:hover .caption{
opacity: 1;
}
.caption-style-1 .hover-effect{
margin: 0px;
padding: 0px;
float: left;
width:220px;
height:150px;
//background-color:#999;
margin-bottom:5px;
}
.hover-effect img{
margin: 0px;
padding: 0px;
float: left;
z-index: 4;
}
.hover-effect h1
{
font-size:20px;
border:solid 1px red;
}
.hover-effect p
{
font-size:13px;
margin:0;
padding:0;
}
.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: 150px;
width: 220px;
z-index: 5;
position: absolute;
}
.caption-style-1 .caption-text h1{
text-transform: uppercase;
font-size: 10px;
}
.caption-style-1 .caption-text .blur{
z-index: 10;
color: #fff;
position: absolute;
width: 220px;
height: 150px;
text-align: center;
background-color: rgba(0,0,0,0.65);
}
/** Nav Menu */
ul.nav-menu{
padding: 0px;
margin: 0px;
list-style-type: none;
width: 490px;
margin: 60px auto;
}
ul.nav-menu li{
display: inline;
margin-right: 10px;
padding:10px;
border: 1px solid #ddd;
}
ul.nav-menu li a{
color: #eee;
text-decoration: none;
text-transform: uppercase;
}
ul.nav-menu li a:hover, ul.nav-menu li a.active{
color: #2c3e50;
}
.opacity
{
opacity:0.2;
filter:alpha(opacity=20); /* For IE8 and earlier */
}
</style>
And my html code's are given below :
<ul class="caption-style-1">
<li>
<div class="hover-effect">
<div class="opacity"><img src="img/chaps_1x.jpg" width="220px" height="150px" alt=""></div>
<h1>Amazing Caption</h1>
<p>Whatever It Is - Always Awesome</p>
</div>
<div class="caption">
<div class="blur"></div>
<div class="caption-text">
<img src="img/chaps_1x.jpg" width="220px" height="150px" alt="">
</div>
</div>
</li>
</ul>
Any Idea?

Answer 1

Your HTML code is not written in well manner. If you using HTML5 then you may use HTML5 tags like figcaption with figure. The Caption tag is not showing in your style because they are behind the image.
So here is the way to move to front using z-index property.
.hover-effect h1
{
font-size:20px;
border:solid 1px red;
position:fixed;
z-index:999;
}
.hover-effect p
{
font-size:13px;
margin:0;
padding:0;
position:fixed;
z-index:999;
}
Here is the Demo. http://jsbin.com/yegiyico/1/