CODEWITHSUNDEEP
javascripthtmlcssreactjs
Tainara
Tainara

Reputation: 337

How to put div over image with HTML and CSS?

I'm still a beginner in programming and I'm doing a project to improve knowledge.

I need to insert a div with text on top of an image, I'm trying to recreate the example of the image below:

enter image description here

Half of the div is an image and the other half is text. Can you tell me how I can do that?

Here's my code I put into codesandbox

import React from "react";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Restaurant</h1>
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          justifyContent: "baseline",
          alignItems: "baseline",
          height: "200px",
          width: "100%",
          maxWidth: "300px"
        }}
      >
        <div>
          <img
            style={{
              width: "100%",
              height: "100%"
            }}
            src="https://b.zmtcdn.com/data/collections/271e593eb19475efc39021c6e92603db_1454591396.jpg"
            alt=""
            className="img"
          />
        </div>
        <div className="divText">
          <span
            style={{
              color: "#fff",
              backgroundColor: "#000"
            }}
          >
            Lorem Ipsum! Lorem Ipsum! Lorem Ipsum!
          </span>
        </div>
      </div>
    </div>
  );
}

Thank you in advance.

Upvotes: 0

Views: 476

Answers (3)

s.kuznetsov
s.kuznetsov

Reputation: 15223

And this solution from me:

style.css:

.divText {
  position: absolute;
  height: 50%;
  background-color: white;
  bottom: 0;
}

App.js:

import React from "react";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Restaurant</h1>
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          justifyContent: "baseline",
          alignItems: "baseline",
          height: "200px",
          width: "100%",
          maxWidth: "300px",
          position: "relative"
        }}
      >
        <div
        style={{
          height: "inherit"
        }}>
          <img
            style={{
              width: "100%",
              height: "100%"
            }}
            src="https://b.zmtcdn.com/data/collections/271e593eb19475efc39021c6e92603db_1454591396.jpg"
            alt=""
            className="img"
          />
        </div>
        <div className="divText">
          <span
            style={{
              color: "#fff",
              backgroundColor: "#000"
            }}
          >
            Lorem Ipsum! Lorem Ipsum! Lorem Ipsum!
          </span>
        </div>
      </div>
    </div>
  );
}

Upvotes: 0

Robbie Cook
Robbie Cook

Reputation: 434

Maybe you could do something like this?

""
.wrapper {
  width: 400px;
  height: 200px;
  position: relative;
}
picture {
  position: absolute;
  z-index: -1;
}

picture img {
  object-fit: cover;
  top: 0;
}

.text-overlay {
  top: 50%;
  height: 50%;
  position: relative;
  background-color: white;
  display: flex;
  z-index: 2;
  padding: 10px;
  opacity: 0.8;
  
  font-family: sans-serif;
}
<div class="wrapper">
 <picture>
  <img src="https://images.unsplash.com/photo-1601758064224-c3c5ec910095?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2047&q=80"
  width="400px"
  height="200px"
  style=" "/>
 </picture>
 
 <div class="text-overlay">
  <p>Hello</p>
 </div>
</div>

Upvotes: 2

Ji aSH
Ji aSH

Reputation: 3457

You have two solutions to set a background image :

use the background properties in CSS

.divText {
  background-image:url("https://b.zmtcdn.com/data/collections/271e593eb19475efc39021c6e92603db_1454591396.jpg");
}

use positioning to make a custom layout

export default function App() {
  return (
    <div className="App">
      <h1>Restaurant</h1>
      <div
        style={{
          position: "relative",
          height: "200px",
          width: "300px"
        }}
      >
        <img
          style={{
            width: "100%",
            height: "100%"
          }}
          src="https://b.zmtcdn.com/data/collections/271e593eb19475efc39021c6e92603db_1454591396.jpg"
          alt=""
          className="img"
        />
        <div className="divText"
          style={{
            position: "absolute",
            bottom: 0,
            height: "50%",
            width: "100%",
            color: "#fff",
            backgroundColor: "#000",
            opacity: 0.7
          }}>
            Lorem Ipsum! Lorem Ipsum! Lorem Ipsum!
        </div>
      </div>
    </div>
  );
}

Upvotes: 2

Related Questions