CSS Text Over Picture

Question

I have the problem to place some text (in my case a date) over a picture. I tried many solutions like these and that worked.

But now I want to display all of my blog-post article thumbnails as a timeline with the date written over the picture.

So one of the problems is, if I place the text over the image, then the next picture will go to the next line, and I don't want that.

So details of my page as an example:

• content width: 600px or 200px depends on the screen or device

• thumbnail: 100px * 100px

So in the case of 600px, it should be 6 pictures per row; in case of 200px should be 2 pictures per row.

Answer 1

FIDDLE Below is an unordered-list of blog posts with the date on top. They are links since you call them "thumbnails" --- the css uses @media rules as breakpoints for your image gride. The .block class on the links define the width of each image because images are set to 100% width and confined only by the .block. The height of the .block is defined by the proportions of the image, so if you put in different size images, you will break the grid.

HTML

<ul class="time-line">

    <li><a class="block">
        <img alt="timeline image"
        src="http://placehold.it/400x400" />

        <h2>42/15/2013</h2>
    </a></li>

    <!-- repeat the list items as needed or insert a loop if you are using php or WP or something -->


</ul> <!-- .time-line -->

CSS

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
}

html, body {
    margin: 0;
}

.wrapper {
    margin: 0 auto;
    max-width: 80em;
}

.time-line {
    margin: 0; padding: 0;
    list-style: none;
}

h2 {
    position: absolute;
    top: 1em;
    left: 0;
    background-color: #f06;
    color: white;
}

.block {
    position: relative;
    display: inline-block;
    width: 50%;
    float: left;
    border: 1px solid black;
}

.block img {
    display: inline-block;
    width: 100%;
    float: left;
}


@media (min-width: 30em) {

    .block {
        width: 33.333333%;
    }

} /* ====================== */

@media (min-width: 40em) {

    .block {
        width: 25%;
    }

} /* ====================== */


@media (min-width: 50em) {

    .block {
        width: 20%;
    }

} /* ====================== */


@media (min-width: 60em) {

    .block {
        width: 16.666666%;
    }

} /* ====================== */