I'm looking to create a design element with a gray text box and a transparent image overlay in a single row using HTML and CSS. The gray box should only cover part of the row, while the image overlays on top.
For mobile responsiveness, I want the text box to fill the first row and have the image drop below it.
Your assistance in achieving this layout would be highly appreciated.
If you need more context, check out this detailed example reflected in an image.
Below is a sample code snippet I tried, but it didn't produce the desired result:
body {
margin: 0;
font-family: Arial, sans-serif;
}
.container {
position: relative;
display: flex;
align-items: center;
height: 300px; /* Adjust height as needed */
}
.text-box {
background-color: #ccc; /* Gray color */
padding: 20px;
width: 50%; /* Adjust width as needed */
box-sizing: border-box;
z-index: 1;
}
.image-overlay {
position: absolute;
right: 0;
top: 0;
width: 50%; /* Adjust width as needed */
height: 100%;
overflow: hidden;
}
.image-overlay img {
width: 100%;
height: 100%;
object-fit: cover; /* Ensures the image covers the container */
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text and Image Overlay</title>
</head>
<body>
<div class="container">
<div class="text-box">
<p>Your text goes here. This box is gray and contains some content.</p>
</div>
<div class="image-overlay">
<img src="https://picsum.photos/200/300" alt="Overlay Image">
</div>
</div>
</body>
</html>