How to solve css issue to display image caption?


Tags: html,css

Problem :

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?



Solution :

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/


    CSS Howto..

    How to render a hierarchy tree in HTML5/CSS?

    How do you ad stylesheets to JSDOM

    How to create double border which is not touching to edges in pure css?

    How to make CSS image transition smooth?

    How do I create html/css elements in a shape of a circle?

    How to implement Read more / Read less in pure CSS

    How do I align text and an image vertically inside a DIV?

    How to make a centered, responsive CSS circle within a Boostrap div?

    how can i add style with CSS to