Text overflow image effect with CSS?-CodePudding

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

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?

CodePudding user response：

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 >
  <div>
    <h1>
      Your text layer for testing purpose
    </h1>
  </div>
  <div >
    <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>

CodePudding user response：

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 >
  <img src="https://images.pexels.com/photos/2857477/pexels-photo-2857477.jpeg?cs=srgb&dl=pexels-deepu-b-iyer-2857477.jpg&fm=jpg" />
  <div >
    <h4>Apparently, we had reached a great height in the athmosphere
    </h4>
  </div>
</div>

CodePudding user response：

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

Create a div to be used as background
Give a background-image to the div created
Center the img on the background and give width/height to the div
Add text
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 >
<p>Text over the img</p>
</div>

CodePudding user response：

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 >
  <p >Maecenas egestas arcu quis ligula mattis placerat. Suspendisse pulvinar, augue ac venenatis condimentum.</p>
  <img  src="https://picsum.photos/seed/picsum/600/400" />
</div>