image caption overlay

[Marcel]

Hello guys,

I hope someone can help me out. I’m having a problem with creating a proper image caption overlay.
It’s onthis website, the left image: http://4077699.mijnwinkel.nl/overmaaike/

The overlay is slightly below the image and I can;t figure out what’s going wrong.

The HTML:

<div style="display:box; position: relative; float:left; width:100%; text-align:center;">

         <img src="//myshop.s3-external-3.amazonaws.com/shop4077600.images.heart.jpg"></img>

            <div class='description'>            
            <p class='description_content'>Haaraccessoires</p>
            </div>

        </div>

The CSS:

div.description{
position:absolute; /* absolute position (so we can position it where we want)/
bottom:0px; / position will be on bottom */
left:0px;
width:100%;
font-family: Lucida;
font-size:20px;
color:white;
background-color:rgba(0,0,0,0.2);

}
p.description_content{
padding:10px;
margin:0;

}

[Paulie_D]

You could do this: http://codepen.io/Paulie-D/pen/f66a765171c3d3980c825a7c089fc726

Or this: http://codepen.io/Paulie-D/pen/2fb6dbdbae0a5bd8274a22ee152504e2

[Paulie_D]

However,on the actual site it’s probably this

.myshp_block img {
margin: 10px 0;
}

[Marcel]

Thanks for your reply.

Do you have a suggestion to correct this in my code? The class you mention is part of a framework of the webshop I’m using. So I prefer not to touch this.

[Marcel]

You are right that the problem is caused by this class. You can now see it;s looking good. However as I wrote this class is part of a template so I’m afraid it’s effecting other style elements om my webshop, but I haven’t tested that yet.

[Author]

Posts