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

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

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using dynamic jquery to target specific elements. How can we apply jquery to selected elements only?

Hello everyone! I have been working on a simple hover color change effect using jQuery, but I noticed that I am repeating the code for different buttons and service icons. Is there a way to achieve the same result so that when a button is hovered, the co ...

javascripthtmljquerycsshover

To switch to desktop mode, double click; for mobile view, just tap once

I am looking to implement 2 different gestures for a specific feature in my application. Ideally, I want users to be able to double click on a card to open it in desktop view, but if they are using a phone, a single tap should suffice. How can I achieve th ...

cssreactjstypescriptmaterial-ui

"Which is better for maximizing the efficiency of an image grid: CSS or Jquery? What are the key

As a UX Designer looking to enhance my coding skills, I must admit my code may not be perfect. Please bear with me as I navigate through this process. I am in the process of revamping my portfolio website. The original seamless grid was created using a Ma ...

javascriptjqueryhtmlcssoptimization

Enhancing User Experience with CSS

Is there a way to create a link within a div and change the hover color to indicate it's a link? The challenge is that my div contains both an image and text in separate divs. div { :hover { background-color: light cyan; } Currently, when I hov ...

htmlcss

I am looking to dynamically alter the CSS background URL using JavaScript

Currently, I am looking to update the background image url using JavaScript. Most tutorials I've come across involve having the image downloaded on the desktop and then providing its path. However, in my scenario, the user will input an image link whi ...

javascripthtmlcss

Optimizing CSS table styles for larger cell width

In my CSS file, I have defined the following style: .ES{ max-width:20px; word-wrap:break-word; } However, when I apply this to my table... <table border="1" cellpadding="2" class="ES" > <tr> <td><input name="rbeso" type="radio" ...

htmlcsshtml-table

Increase the CSS integer by a set value at regular intervals with the help of JavaScript

I am looking to create a simulated loading icon that gives the illusion of loading for some calculations, but in reality, it loads quickly. My plan is to increment the animation every second until it appears "complete". I am using CSS3 animations, with a h ...

javascriptjqueryhtmlcss

Ensuring a logo remains centered and stable even when the browser is resized

How can I ensure that this logo remains fixed at the center top of the page, without moving as the browser size changes? I want the logo to maintain its position and not recenter itself when the browser is resized. Below is my current CSS CSS #logo { p ...

htmlcss

Customize your Outlook emails with HTML and CSS to right-align content for a polished look

My current project involves generating a report to be sent via email, with Outlook being the mandatory application in our system. The report's content is HTML-based and utilizes a table layout. Part of the content needs to appear right-aligned within ...

htmlcssoutlook

How can one make the image pop and stand out from its background?

I am trying to achieve a similar effect as shown in this design where the image stands out from its background. I have managed to do that, but I am struggling with aligning the image to the center and bottom with overflow. Can anyone help me with this? Th ...

cssuser-interfacetailwind-csscss-position

How can I create a responsive input group with automatic width using Bootstrap 3.1?

I am having trouble with the layout of my two floating divs. The first div contains buttons and the second div contains an input-group. However, the input-group is moving down a line instead of utilizing the available space. Here is a link for reference: ...

htmlcsstwitter-bootstrap

Tips for updating the background color of a dropdown menu in the navigation bar

I am attempting to increase the size of the dropdown menu and change its background color. Currently, I can only modify the color of the links and the surrounding area. .navbar a { width: 125px; text-align: center; ...

htmlcssbootstrap-4

Custom background options for Wordpress developer

I have been exploring the WordPress codex to learn about incorporating custom background options, similar to this example $defaults = array( 'default-color' => '', 'default-image' => '&apo ...

phphtmlcsswordpresswordpress-theming

Is there a way to display the true colors of a picture thumbnail when we click on it?

In my project, I attempted to create a dynamic color change effect when clicking on one of four different pictures. The images are displayed as thumbnails, and upon clicking on a thumbnail, it becomes active with the corresponding logo color, similar to t ...

javascripthtmlcssvue.js

Center the image within a Grid item using Material UI's alignment feature

I am currently utilizing the Grid component from Material UI. I'm facing an issue where the image inside a Grid item is aligned to the left instead of being centered. <Grid container direction="row" justify="center" alignIte ...

cssreactjsmaterial-ui

Adjust the placement of the navigation to the middle of the

Currently working on a webpage using html/css, I came across a stylish navigation bar which I decided to customize. However, I'm facing difficulty in aligning the navigation bar at the center of the header. Here is a snapshot of the current layout: h ...

htmlcss

Ensuring the Angular Material bottom sheet (popover) stays attached to the button

Recently, I've been working on an Angular project where I successfully integrated a bottom sheet from Angular Material. However, I encountered an issue when trying to make the opened popup sticky to the bottom and responsive to its position, but unfor ...

cssangularsassangular-material

Switching HTML text by clicking or tapping on it

I'm currently working on a website that will showcase lengthy paragraphs containing complicated internal references to other parts of the text. For instance, an excerpt from the original content may read: "...as discussed in paragraph (a) of section ...

javascriptjqueryhtmlcss

Enable wp_star_rating for display on the front end

My goal is to incorporate the wp_star_rating function into a shortcode for use on the frontend of my WordPress website. To achieve this, I have copied the code from wp-admin/includes/template.php to wp-content/themes/hemingway/functions.php. I have includ ...

phpcsswordpress

Implementing Bootstrap 3 mobile design by necessity

My Wordpress site uses a Bootstrap 3 layout where the loop displays posts using 2 different templates. Type 1 <div class="row"> <div class="col-md-4"> <h1>title</h1> <h3>sub</h3> </div> ...

jqueryhtmlcsswordpresstwitter-bootstrap