CODEWITHSUNDEEP
htmlcssimageoverlayblock
Bytebitten
Bytebitten

Reputation: 33

Using CSS to overlay text on top of images

I'm trying to get a nice in-page menu with some small images and the title over those image blocks. The blocks work out OK, but not the text overlay.

My HTML:

<!DOCTYPE html>
<head>
    <title>Blocks example</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta name="viewport" content="width=980" />
</head>
<body>
<div id="wrapper">
    <header>
        <img src="img/header.jpg" alt="Header Blocks">
        <span><a href="#" title="To homepage"><h1>Blocks example</h1></a></span>
    </header>
    <main>
        <article id='blokken'>
            <a href='#'><img src="img/placeholder.jpg" alt="placeholder 1"><p>placeholder 1</p></a>
            <a href='#'><img src="img/placeholder.jpg" alt="placeholder 2"><p>placeholder 2</p></a>
            <a href='#'><img src="img/placeholder.jpg" alt="placeholder 3"><p>placeholder 3</p></a>
            <a href='#'><img src="img/placeholder.jpg" alt="placeholder 4"><p>placeholder 4</p></a>
            <a href='#'><img src="img/placeholder.jpg" alt="placeholder 5"><p>placeholder 5</p></a>
            <a href='#'><img src="img/placeholder.jpg" alt="placeholder 6"><p>placeholder 6</p></a>
        </article>
    </main>
</div>
    <footer>
    </footer>
</body>

And my CSS:

body {
    margin: 0;
    }

#wrapper{
    width: 980px;
    margin: 0 auto;
    padding-bottom: 50px;
}

/* Header */
header > img{
    }
header > span{
    position: relative;
    display: inline;
    top: 200px;
    left: 150;
    width: 200px;
    height: 100px;
    }
header > a{
    /*opacity: 0;
    filter: alpha(opacity=0); */
    }

/* Blokken */
    #blokken{
        padding-left: 100px;
    }
    #blokken img{
        margin: 25px 25px;
        -webkit-transition: all 0.5s linear;
        -moz-transition: all 0.5s linear;
        -ms-transition: all 0.5s linear;
        -o-transition: all 0.5s linear;
        transition: all 0.5s linear;
        }
    #blokken img:hover{
        -webkit-filter: brightness(50%);
        filter: brightness(50%);
        }

And here a link to a version online

This is what I want to get, but with text in an overlay (where the text 'placeholder' is now): Screenshot

I tried a lot with position absolute and relative, but can't seem to get it to work correctly. Who has a solution for me, or can point me into the right direction?

Upvotes: 2

Views: 1326

Answers (3)

Bytebitten
Bytebitten

Reputation: 33

So I took from both answers some of the solution and got this as my result:

<article id='blocks'>
<a href='#first_link' style='background:#ffffff url("img/blocks/first_link.jpg") no-repeat;'><span>First link</span></a>
<a href='#second_link' style='background:#ffffff url("img/blocks/second_link.jpg") no-repeat;'><span>Second link</span></a>
<a href='#third_link' style='background:#ffffff url("img/blocks/third_link.jpg") no-repeat;'><span style='font-size:1em;'>Some very long text</span></a>
<a href='#fourth_link' style='background:#ffffff url("img/blocks/fourth_link.jpg") no-repeat;'><span>Fourth link</span></a>
<a href='#fifth_link' style='background:#ffffff url("img/blocks/fifth_link.jpg") no-repeat;'><span>Fifth link</span></a>
<a href='#sixth_link' style='background:#ffffff url("img/blocks/sixth_link.jpg") no-repeat;'><span>Sixth link</span></a>


    #Blocks{
    padding-left: 100px;
    }
#Blocks a{
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
    margin: 25px 25px;
    width: 200px;
    height: 200px;
    display: inline-block;
    text-align: center;
    }
#Blocks span{
    display: inline-block;
    line-height: 200px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    text-shadow: -1px -1px 0 #000,  
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
    }
#Blocks a:hover{
    -webkit-filter: brightness(50%);
    filter: brightness(50%);
    }

By using inline CSS (lets say it's user generated content) I give the blocks their own background. The longer text made a bit smaller, still fiddling with it, but that's a worry for another time. Great thanks to all of you!

Upvotes: 1

pedromendessk
pedromendessk

Reputation: 3638

Take a look a this fiddle to see if it's what you want. The text is overlaping the picture's text but you can change the picture any way.

I simplified a bit your HTML. You'll have to put the rest that is missing after.

But the main changes is the table layout and the removed image from the HTML and added it on the CSS. Here is a sample of the fiddle

<table id='blokken'>
    <tr>
        <td>
            <a href='#'><p>placeholder 1</p></a>
        </td>
    </tr>
</table>

Upvotes: 3

Rotan075
Rotan075

Reputation: 2615

This can be easier been done by using the image as an background-image and using a span to position the text within the anchor.

I would suggest you would do this:

HTML code for 1 block:

<div id="wrapper">
    <header>
    </header>
    <main>
        <article id='blokken'>
            <a href='#'><span>placeholder 1</span></a>
        </article>
    </main>
</div>

CSS:

#blokken a {
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}
#blokken a {
    background-image: url(http://www.warwickrowers.org/wp-content/uploads/2014/10/default-placeholder-200x200.png);
    background-repeat: no-repeat;
    width: 200px;
    height: 200px;
    display: block;
    text-align: center;
}
#blokken span {
    display: inline-block;
    margin-top: 43%;
    color: red;
    font-weight: bold;
    font-size: 24px;
}
#blokken a:hover {
    -webkit-filter: brightness(50%);
    filter: brightness(50%);
}

You can see how it works here: JSFIDDLE

Upvotes: 1

Related Questions