Overlay text on an image using a CSS grid

I'm working on a CSS grid layout where I want to overlay text on an image. Below you can see the code I currently have without the text overlay.

.sbp-item12 {
        grid-row: 6 / 7;
        grid-column: 9/13;
        height: 250px;
    }
<div class="sbp-item12">
    <a href="#">
       <h3>Here is a headline</h3>
       <figure>
          <img src="https://placehold.it/380x250">
       </figure>
    </a>
 </div>

I attempted to add the following snippet to the code, but then the text ends up at the bottom of my page rather than staying within the grid item. Any suggestions on how I can successfully place text over the image in my grid item?

.sbp-item12 {
    grid-row: 6 / 7;
    grid-column: 9/13;
    height: 250px;
}

.bottom-left {
    z-index: 100;
    position: absolute;
    color: white;
    font-size: 24px;
    font-weight: bold;
    left: 0;
    right: 0;
    bottom: 0;
}
<div class="sbp-item12">
    <a href="#">
        <div class="text-bottm-left">
            <h3>Here is a headline</h3>
        </div>
        <figure>
            <img src="https://placehold.it/380x250">
        </figure>
    </a>
</div>

htmlcss

Answer №1

To position a div at the bottom left, you need to ensure that the parent element has its position:relative set and then apply position:absolute to the child div. It's important to correct any mismatches between your HTML and CSS classes for it to work properly. Below is a snippet of the code:

.sbp-item12 {
  grid-row: 6 / 7;
  grid-column: 9/13;
  height: 250px;
}

figure {
  margin: 0;
  position: relative
}

.bottom-left h3{
  z-index: 100;
  position: absolute;
  color: black;
  font-size: 24px;
  font-weight: bold;
  left: 0;
  bottom: 0;
  margin:0
}
<div class="sbp-item12">
  <a href="#">
    <figure>
      <img src="https://placehold.it/380x250">
      <div class="bottom-left">
        <h3>Here is a headline</h3>
      </div>
    </figure>
  </a>
</div>

Answer №2

Give this a shot:

* {
  margin: 0;
  padding: 0;
}

.bottom-left {
  /* Add your text styling here*/
  color: white;
  font-size: 24px;
  font-weight: bold;
}

.sbp-item12 {
  position: relative;
  display: inline-block;
  grid-row: 6 / 7;
  grid-column: 9/13;
  height: 250px;
}

.sbp-item12 .bottom-left {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 0;
  /* Text alignment options: */
  /* text-align: center; */
}
<div class="sbp-item12">
  <a href="#">
    <div class="bottom-left">
      <h3>This is the main heading</h3>
    </div>
    <figure>
      <img src="https://placehold.it/380x250" alt="This is the main heading" />
    </figure>
  </a>
</div>

Answer №3

Give this a shot:

.sbp-item12 {
  grid-row: 6 / 7;
  grid-column: 9/13;
  height: 250px;
}

div.img-post {
  position: relative;
}

h3.img-title { 
  position: absolute;
  z-index: 1;
  left:175px; 
}

img.img-body { 
  position: absolute
}
<div class="sbp-item12 img-post">
    <a href="#">
       <h3 class="img-title">This is the main title</h3>
       <figure>
          <img class="img-body" src="https://placehold.it/380x250">
       </figure>
    </a>
 </div>

Answer №4

There seems to be a mistake in your code. Change the class="text-bottm-left" to class="bottom-left". Hopefully, this adjustment will resolve the issue.

<div class="sbp-item12">
    <a href="#">
        <div class="bottom-left">
            <h3>Here is a headline</h3>
        </div>
        <figure>
            <img src="https://placehold.it/380x250">
        </figure>
    </a>
</div>

Answer №5

To ensure proper positioning, make sure the parent div is set to relative position using position: relative. Next, place the text in absolute position using position: absolute.

Utilize additional CSS properties such as left, right, top, and bottom to precisely position the text as desired.

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

Is there a way to update the value of a variable with the help of a checkbox?

When I check the checkbox, the specOrder const gets updated as expected. However, I am struggling to figure out how to remove the value when the checkbox is unchecked. Below is the code I have been working on: const SpecialtyBurgers = () => { cons ...

javascripthtmlreactjs

Replace automatically generated CSS with custom styles

When using a Jquery wysiwyg editor, I have encountered an issue where it automatically adds code to the textarea at runtime. The problem arises from it inserting an inline style of style="width:320px" when I need it to be 100% width due to styles already ...

javascriptjqueryhtml

Tips for reducing text in a card design

As a newcomer to codeigniter 4, I recently created an event card with a lengthy description. However, when I attempted to display the event data from the database on the card, it ended up becoming elongated due to the length of the description: https://i. ...

phpcsscodeigniterbootstrap-5card

What is the reason behind receiving a CSS warning stating "Expected color but found '0' " when using Phaser's setText() function?

Here's how I created my text object: statusBarHP.text = game.add.text(0, 0, '', { font:"16px Arial", fill:"#ffffff", stroke:"#000000", strokeThickness:2 }); For the object that holds the text: statusBarHP = game.add.sprite ...

javascriptcsstextwarningsphaser-framework

Error: Collision detection in Three.js console output

I am attempting to create a collision detection system using Three.js (a WEBGL library). However, I keep encountering an error stating "cannot call method multiplyVector3 of undefined". Is there anyone who can help me identify what I may be doing incorrec ...

htmlwebthree.jswebgl

Creating personalized buttons with Bootstrap

I'm looking to create custom buttons using Bootstrap. The "Get Quote" button should have a magnifying glass symbol on its left, and the "Clear" button should have a symbol on its left as well, like shown in the image below. Additionally, I want to cha ...

htmlcssbootstrap-4

The Issue with Non-Functional Links in Nivo Slider

Currently facing an issue with the Nivo Slider as it no longer links to any of the photos in the slider. Initially, I had 14 pictures linked to a post with a full embedded gallery inside. The problem arose when using a "fixed" size for the gallery, which d ...

cssnivo-slider

What prompts certain individuals to convert their asp.net pages into HTML pages before publishing?

Recently, I was informed that there is a possibility of working on a project involving ASP.NET 3.5 and C#. A colleague suggested that when we publish the site, we should convert all pages to HTML. This means instead of www.test.com/Page.aspx, it would be w ...

c#asp.nethtmlsecurity

Personalize the bootstrap-vue styling within your Nuxt project

Currently, I am working on a nuxt project and utilizing bootstrap-vue as a styling module for my components. I am unsatisfied with the default styles provided and wish to incorporate some customization. Specifically, I aim to modify the appearance of the ...

cssvue.jsbootstrap-4nuxt.js

Generate visual representations of data sorted by category using AngularJS components

I am facing an unusual issue with Highcharts and Angularjs 1.6 integration. I have implemented components to display graphs based on the chart type. Below is an example of the JSON data structure: "Widgets":[ { "Id":1, "description":"Tes ...

javascripthtmlangularjsjsonhighcharts

Trouble Arising in Showing the "X" Symbol upon Initial Click in Tic-Tac-Toe Match

Description: I'm currently developing a tic-tac-toe game, and I've run into an interesting issue. When I click on any box for the first time, the "X" symbol doesn't show up. However, it works fine after the initial click. Problem Details: ...

javascripthtmlcssgame-development

Styling with CSS: Proper alignment of elements within a div container

I'm struggling with positioning three elements within a div. The left element needs to be on the left, the middle element centered, and the right element on the right. Here's what I have so far in my CSS: #left-element { margin-left: 9px; ...

csspositioninghtml

Looking to transform a list into JSON format using JavaScript?

I have a collection that looks like this: <ol class="BasketballPlayers"> <li id="1">Player: LeBron, TotalPoints: 28753, MVP: true</li> <li id="2">Player: Steph, TotalPoints: 17670, MVP: true< ...

javascripthtmljson

Difficulty achieving gradient effect with partial background color change in table-cell

In order to achieve a unique look for this particular design, I am seeking ways to alter the red background color of each cell in varying degrees - such as 100% for the first cell, 100% for the second cell, and 50% for the third cell. Update: After experi ...

htmlcssbackground-colorlinear-gradients

The inclusion of float: left disrupts the formatting of the list

My webpage features a visual element known as a "plan", which consists of a small table and an image. I want these two elements to appear side by side without any styling. Currently, they are displayed one below the other. You can view how it looks like he ...

htmlcsscss-float

What could be causing me to have to click the button twice in order to view my dropdown list? Any suggestions on how to

I am facing an issue where I have to click twice on the "Action" button in order to see my dropdown list. How can I resolve this? Is there a way to fix it? $(document).ready(function() { $(".actionButton").click(function() { $dropdown = $("#cont ...

javascripthtmljquerybootstrap-4fetch

Revamp the website to create a more streamlined and compact version that mirrors the functionality of the desktop website

My goal is to make my website responsive on all mobile devices. I want the mobile version to look exactly like the desktop version, just smaller in size. I attempted using transform but it didn't have the desired effect. I aim to achieve the same con ...

htmlcss

Setting default selections for mat-select component in Angular 6

I've been attempting to preselect multiple options in a mat-select element, but I haven't been successful so far. Below is the snippet of HTML code: <mat-dialog-content [formGroup]="form"> <mat-form-field> <mat-select pla ...

htmlangulartypescriptangular-material

Is there any practical reason to choose tables over CSS for controlling layouts?

As I dive into updating a large amount of code for a web application, I've noticed that tables are heavily used throughout to manage layout. Being relatively new to HTML programming, I find myself questioning the necessity of using tables when CSS co ...

htmlcssbrowserhtml-table

What is the best way to position <div> elements?

I'm having trouble aligning two elements to create columns and adding a footer. Currently, the elements are stacked horizontally and the footer is inline with them. How can I adjust the formatting of the page? h1 { color: #225522; margin: 0px ...

htmlcss