Is there a way for me to superimpose text onto an image in this instance?

Question

Is there a way for me to superimpose text onto an image in this instance?

I am attempting to place a "Text overlay goes here" over the profilepic.jpg image below. I believe there may be an issue with my CSS code. My approach was to create a new div class named overlay and embed that line within the imgcontainer class. Can someone pinpoint where I may be going wrong?

HTML

<div id="timeline">
        <div class="block2x3 block">
            <div class="imgcontainer">
                <img src="profilepic.jpg" />
                <p><div class="overlay">Text Overlay Goes Here</div></p>
            </div>

            <div class="commentcontainer">
                <div class="peoples">
                    <a href="#"><strong class="peoplename">Joe Schmo</strong></a> and <a href="#">42 other people bought this</a>
                    <p>Have commented on your <a href="#">wall post</a></p>
                </div>
            </div>
        </div>

CSS

#timeline div[class*="block2x3"] .imgcontainer  {height:66.6%;}
#timeline div[class*="block2x3"] .commentcontainer  {height: 33.4%;;}
#overlay{
    float: top;
    background: rgba(0,0,0,.7);
}

css

Answer 1

Answer №1

Check out this demo on how to implement this feature: http://jsfiddle.net/codershop/ddg2ymxm/

Make sure to remove the paragraph tags surrounding the overlay div.

<div class="overlay">Insert Overlay Text Here</div>

In your CSS file, update the #overlay selector to a class selector .overlay. It should look like this:

.overlay{
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    left: 15px;
    position: absolute;
    top: 15px;
}

Answer 2

Check out this demo on how to implement this feature: http://jsfiddle.net/codershop/ddg2ymxm/

Make sure to remove the paragraph tags surrounding the overlay div.

<div class="overlay">Insert Overlay Text Here</div>

In your CSS file, update the #overlay selector to a class selector .overlay. It should look like this:

.overlay{
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    left: 15px;
    position: absolute;
    top: 15px;
}

Answer 3

Answer №2

float: top; is not a valid CSS property :) If you want to position an element at the top, use position: absolute

Add position: absolute to the overlay container to place it over the top of the image.
Ensure your image container has position: relative to allow the overlay to position itself in relation to it.
Avoid setting fixed height properties and let the content dictate the height instead.
Use display: inline-block on the image container for automatic resizing with the image's width.
Keep the overlay container's width as width: 100% to match the full width of the image.

CSS / HTML / Demo

* {
    margin: 0;
    padding: 0;
}

#timeline {
    padding: 10px;  
}

.image {
    position: relative; 
    display: inline-block; /* allow width to be determined by the images size */    
}

.block .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: center;
    width: 100%; /* Full width of .image */
    background: rgba(0,0,0,.7);
    color: #FFF;
}

.comment {
    padding: 10px 0 0;  
}

<div id="timeline">
    <div class="block2x3 block">
        <div class="image">
            <img src="http://www.placehold.it/200" />
            <div class="overlay">Text Overlay Goes Here</div>
        </div>
        <div class="comment">
            <a href="#"><strong class="peoplename">Joe Schmo</strong></a> and <a href="#">42 other people bought this</a>
            <p>Has commented on your <a href="#">wall post</a></p>
        </div>
    </div>
</div>

Answer 4

float: top; is not a valid CSS property :) If you want to position an element at the top, use position: absolute

Add position: absolute to the overlay container to place it over the top of the image.
Ensure your image container has position: relative to allow the overlay to position itself in relation to it.
Avoid setting fixed height properties and let the content dictate the height instead.
Use display: inline-block on the image container for automatic resizing with the image's width.
Keep the overlay container's width as width: 100% to match the full width of the image.

CSS / HTML / Demo

* {
    margin: 0;
    padding: 0;
}

#timeline {
    padding: 10px;  
}

.image {
    position: relative; 
    display: inline-block; /* allow width to be determined by the images size */    
}

.block .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: center;
    width: 100%; /* Full width of .image */
    background: rgba(0,0,0,.7);
    color: #FFF;
}

.comment {
    padding: 10px 0 0;  
}

<div id="timeline">
    <div class="block2x3 block">
        <div class="image">
            <img src="http://www.placehold.it/200" />
            <div class="overlay">Text Overlay Goes Here</div>
        </div>
        <div class="comment">
            <a href="#"><strong class="peoplename">Joe Schmo</strong></a> and <a href="#">42 other people bought this</a>
            <p>Has commented on your <a href="#">wall post</a></p>
        </div>
    </div>
</div>

Is there a way for me to superimpose text onto an image in this instance?

HTML

CSS

Answer №1

Answer №2

Similar questions

Is there a way to achieve a transparent background while animating the second text?

Blending an HTML jQuery toggle

Shifting and implementing various styles across numerous elements at the same time

Turn off automatic resizing of iframes

Having trouble getting CSS3 Keyframes to function properly?

Why doesn't the background color display properly when the div height is set to auto?

Looking for a plugin that can color the text "Google" in the exact shade as the Google logo? Check out this jQuery

Ways to format the direct descendant of a multi-level list?

Dealing with ng-repeat and button alignment across Chrome, Edge, and Firefox

Having trouble with animating the background color of an input button using jQuery?

ways to set a background color for a textarea element using bootstrap

What is the best way to showcase my products in a horizontal line? I am seeking a solution using PHP and Bootstrap to exhibit all the items retrieved

What is the best way to position a logo and navbar in alignment?

The size of the cursor varies depending on the line it's placed on

Adjusting Spacing Between Characters

In my opinion, CSS3 transform translateZ can be likened to scaling in some way

What is the process for implementing hover transitions on link elements?

CSS: What causes the gap below my border to appear?

Tips for creating a stylish, blurred, and centered box for a login form on a full-size background that is also responsive

Creating two columns using React and Material-UI Grid while utilizing just one map function for iteration