CODEWITHSUNDEEP
htmlcss
user16222640
user16222640

Reputation:

Text overflow image effect with CSS?

Before I begin, I'm not referring to the text-overflow ones in CSS. What I'm actually referring to is one of these:

screenshot of a text overflowing an image

What I'm trying to achieve here is that the text intersects or overflows with the image purposefully. That way, you get this text overflow effect you see from the picture. Any idea how is this achieved using CSS?

Upvotes: 0

Views: 2251

Answers (4)

delalluyah
delalluyah

Reputation: 67

You could put the text in an overlay container, that way, you can add more items if you want. Demo on codepen

.container {
  position: relative;
  width: 100%;
  min-height: 600px;
  border: 1px solid black;
  display: flex;
  justify-content: right;
}

.container img {
  width: 50%;
  height: auto;
  object-fit: cover;
}

.container h4 {
  font-size: 3rem;
  max-width: 60%;
}

.overlay {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
}
<div class="container">
  <img src="https://images.pexels.com/photos/2857477/pexels-photo-2857477.jpeg?cs=srgb&dl=pexels-deepu-b-iyer-2857477.jpg&fm=jpg" />
  <div class="overlay">
    <h4>Apparently, we had reached a great height in the athmosphere
    </h4>
  </div>
</div>

Upvotes: 0

Nick Vu
Nick Vu

Reputation: 15520

You can use position: absolute; for the image layer

.container {
  position: relative; /* Add the image and content to be relative */
}

.image-layer {
  position: absolute; /* Make the image flexible in the container */
  top: 0; /* Place the image to the top side of the container */
  right: 0; /* Place the image to the right side of the container */
  z-index: -1; /* Put the image under the main layer which has content */
}
<div class="container">
  <div>
    <h1>
      Your text layer for testing purpose
    </h1>
  </div>
  <div class="image-layer">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png" width="500" height="500" />
  </div>
</div>

Upvotes: 1

Yaroslav Trach
Yaroslav Trach

Reputation: 2011

Like an option, you can use grid approach to make text content to be on front of image with overlaying. In this case, your text and image will be relevant to each other, see Code snippet for details:

Also, to manage overlay size, you can use CSS variables, like this one --overlay-size: 10%;.

.wrapper-grid {
  display: grid;
  grid-template-areas: 'content'; /* creating grid areas */
  align-items: center;
  
  --overlay-size: 10%; /* overlay size */
}

.wrapper-grid .text,
.wrapper-grid .image {
  grid-area: content; /* use same cell for text and image */
}

.wrapper-grid .text {
  z-index: 1; /* place text in front of image */
  max-width: calc(50% + var(--overlay-size, 0));
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.4;
}

.wrapper-grid .image {
  width: calc(50% + var(--overlay-size, 0));
  justify-self: flex-end; /* aligning image to the right  */
}
<div class="wrapper-grid">
  <p class="text">Maecenas egestas arcu quis ligula mattis placerat. Suspendisse pulvinar, augue ac venenatis condimentum.</p>
  <img class="image" src="https://picsum.photos/seed/picsum/600/400" />
</div>

Upvotes: 1

manjiro sano
manjiro sano

Reputation: 842

You didn't specify enough, but I believe you want something like this:

  1. Create a div to be used as background
  2. Give a background-image to the div created
  3. Center the img on the background and give width/height to the div
  4. Add text
  5. Done

.background {
 background-image: url('https://images.unsplash.com/photo-1513530534585-c7b1394c6d51?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb- 1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1471');
 background-size: cover;
 background-position: center;
 width: 400px;
 height: 300px;
 display: flex;
 align-items: center;
 border: 1px solid black;
}

.background > p {
 margin-left: 10px;
 font-size: 30px;
}
<div class="background">
<p>Text over the img</p>
</div>

Upvotes: 2

Related Questions