Best way how to put elements above an tag?


Tags: css,html5

Problem :

I have a list of cards where the background of the card is an image and some extra information must be put above it. Sounds like a nice job for background-image? Yeah, but as I need to set these images dynamically and the images need to be editable, background-image isn't an option (I know there are ways to do it, but it is not an option for this particular situation).

So here is what my card looks like

<figure>
<img src="foo.jpg" alt="">
<figcaption>
<h5>Name:<span>xyz</span></h5>
<h6>Location:<span>xyz</span></h6>
</figcaption>
</figure>

And the css what it SHOULD do, but it doesn't and it neither seems to me like a good routine:

.container-of_the-cards{ /* This is actually a <li> element with some different specs, but for illustration purposes I guess this one is easier */
width:100%;
display:inline-block;}
figure{
box-sizing:border-box;width:30%;height:300px;margin-right:1.1%;overflow:hidden;}
figure img{
width:100%;
height:100%;}
figcaption{box-sizing:border-box;margin:0 20px; background: blue; margin-top:-280px;}
figcaption h5{top-margin:30px;}
figcaption h6{top-margin:80px;}

So, now I have this problem:

margin-top:-280px;

I should rather prevent this, but how?



Solution :

You should add position: relative in order to take the element out of flow.

You will need to adjust the left and top attributes.

HTML

<figure>
    <img src="foo.jpg" alt="">
        <figcaption>
            <h5>Name:<span>xyz</span></h5>
            <h6>Location:<span>xyz</span></h6>
        </figcaption>
</figure>

CSS

.container-of_the-cards{ /* This is actually a li-element with some different specs, but for illustrational purposes I guess this one is easier */
    width: 100%;
    display: inline-block;
}
figure{
    box-sizing: border-box;
    width: 30%;
    height: 300px;
    margin-right: 1.1%;
    overflow: hidden;
}

figure img{
    width: 100%;
    height: 100%;
    position: relative;
}

figcaption{
    box-sizing: border-box;
    margin: 0 20px;
    background: blue;
    margin-top: -280px;
}

figcaption h5{
    top-margin:30px;
}

figcaption h6{
    top-margin:80px;
}

JSFIDDLE

If this is not the effect you want please edit your question to be more clear.


    CSS Howto..

    Show bottom of an overflow string in a div with fixed height/width?

    How to translate html, css and js into one javascript (animation)

    How to override priority in CSS classes?

    How to add image after button/div css?

    ASP.NET How to set Text to the right side of image

    CSS how to translate an image up, and have the div adjust to the new size?

    Text-only CSS slideshow

    How to make a graphic image responsive in css

    How can I fade in a div on hover with jquery on top of image with animated rollover

    How to not display common border between two adjacent divs?

    css hover : aligning on bottom: how to align on top?

    How can I add my custom style for my bootstrap navbar?

    How to convert template from table to div

    How can I conditionally assign a color to text in jade

    How do I make a CSS triangle with smooth edges?

    How To Create SubMenu in Drop Down (HTML/CSS)

    How can I achieve this transparency effect using css?

    How to style Accelerator display text in JavaFX ContextMenu via CSS?

    How to add scrollbar in this CSS javascript pop up window?

    How slow is * css selector for mobile browsers?

    How to change active link color in bootstrap css?

    How to create a form that flys out onto the screen using javascript/css

    How do I put these on the same line?

    How to use nth-child with only direct children?

    How to style the tabs in primary menu links in a Drupal 7 subtheme?

    How to locate which css include is used for an element

    How to apply CSS styling to dynamically generated list (within mCustomScrollbar container)?

    How to move items left and right in an html table using css? -

    How to change font size of the first option tag in a dropdown menu (select)?

    How to hide main menu while showing sub-menu in css