Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS image caption overlay

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #150086
    Marcel
    Participant

    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;

    }

    #150088
    Paulie_D
    Member
    #150089
    Paulie_D
    Member

    However,on the actual site it’s probably this

    .myshp_block img {
    margin: 10px 0;
    }
    
    #150093
    Marcel
    Participant

    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.

    #150098
    Marcel
    Participant

    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.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.