Text overflow image effect with CSS?

Question

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?

Answer 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>

Answer 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>

Answer 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>

Answer 4

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>