'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?

htmlcss


Solution 1:[1]

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>

Solution 2:[2]

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>

Solution 3:[3]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 manjiro sano
Solution 3 Yaroslav Trach

Related Questions