Is there a way to ensure that the text stays positioned behind the initial image even as the window size is adjusted

Question

Is there a way to ensure that the text stays positioned behind the initial image even as the window size is adjusted

<html>
<head>
<title> Example </title>
<style>
img:hover {opacity : 0.3;}
img {z-index : 1;
height : 33%;
width : 33%;

}
.first { position : absolute;
 top: 0%;
 left: 0%;}
 .second {position : absolute;
 top: 0%;
 left: 33%;}
 .third {position : absolute;
 top: 0%;
 left: 66%;}
</style>
</head>
<body>
This content will stay behind the first image when resizing the window.
<img class = "first" src = "http://www.dubcen.com/uploads/ex.jpg">
<img class = "second" src = "http://www.dubcen.com/uploads/ex.jpg">
<img class = "third" src = "http://www.dubcen.com/uploads/ex.jpg">

</body>
</html>

Is there a way to make this text appear only behind the first image? I've tried using div elements but haven't found a working solution yet.

html css

Answer 1

Answer №1

To create a clean layout, consider using position: absolute for your first image and organizing content into three separate boxes. Place text only in the first box and adjust the positioning accordingly. Take a look at the fiddle link provided for reference.

position: absolute;
top: 0;
left: 0;

For a potential solution, visit: https://jsfiddle.net/c4oz41nu/

If you have any questions or need further assistance, feel free to reach out!

Answer 2

To create a clean layout, consider using position: absolute for your first image and organizing content into three separate boxes. Place text only in the first box and adjust the positioning accordingly. Take a look at the fiddle link provided for reference.

position: absolute;
top: 0;
left: 0;

For a potential solution, visit: https://jsfiddle.net/c4oz41nu/

If you have any questions or need further assistance, feel free to reach out!

Answer 3

Answer №2

Your HTML and CSS need some adjustments.

Avoid using position absolute in your code like you did in the example.

Check out the updated code below:

New HTML

<div class="imgHolder">
    <p>This text should stay behind the 1st image when resizing the window.</p>
    <img src="http://www.dubcen.com/uploads/ex.jpg">
</div>
<div class="imgHolder"><img src="http://www.dubcen.com/uploads/ex.jpg"></div>
<div class="imgHolder"><img src="http://www.dubcen.com/uploads/ex.jpg"></div>

Updated CSS

 img:hover {opacity : 0.3}
.imgHolder{float:left;width:33%;white-space:normal;position:relative}
.imgHolder p{position:absolute;top:0;display:none}
.imgHolder:hover p{display:block}

This should resolve the issue.

Answer 4

Your HTML and CSS need some adjustments.

Avoid using position absolute in your code like you did in the example.

Check out the updated code below:

New HTML

<div class="imgHolder">
    <p>This text should stay behind the 1st image when resizing the window.</p>
    <img src="http://www.dubcen.com/uploads/ex.jpg">
</div>
<div class="imgHolder"><img src="http://www.dubcen.com/uploads/ex.jpg"></div>
<div class="imgHolder"><img src="http://www.dubcen.com/uploads/ex.jpg"></div>

Updated CSS

 img:hover {opacity : 0.3}
.imgHolder{float:left;width:33%;white-space:normal;position:relative}
.imgHolder p{position:absolute;top:0;display:none}
.imgHolder:hover p{display:block}

This should resolve the issue.

Answer 5

Answer №3

Here is the code snippet you can use:

<!DOCTYPE html>
<html>
<head>
<title> Example </title>
<style>
img:hover {
    opacity : 0.3;
}
img {
    height : 33%;
    width : 33%;
}
.first {
    z-index: 1;
    position : fixed;
    top: 0%;
    left: 0%;}
 .second {
    z-index: 0;
    position : absolute;
    top: 0%;
    left: 33%;
 }
 .third {
    z-index: 0;
    position : absolute;
    top: 0%;
    left: 66%;
 }
 p{
    top: 0;
    left: 0;
    position: absolute;
    z-index: 0;
 }
</style>
</head>
<body>
<p class="text">This text will stay behind the first image when the window is resized.</p>
<img class = "first" src = "http://www.dubcen.com/uploads/ex.jpg">
<img class = "second" src = "http://www.dubcen.com/uploads/ex.jpg">
<img class = "third" src = "http://www.dubcen.com/uploads/ex.jpg">
</body>
</html>

To achieve this layout, I added a <p> tag for the text and set its z-index to 0. Each image, except the first one, also has a z-index of 0. The first image has a z-index of 1 to ensure it stays on top. The text is positioned absolutely and remains behind the first image even after resizing, but not behind the other images. I hope this explanation clarifies things for you :)

Answer 6

Here is the code snippet you can use:

<!DOCTYPE html>
<html>
<head>
<title> Example </title>
<style>
img:hover {
    opacity : 0.3;
}
img {
    height : 33%;
    width : 33%;
}
.first {
    z-index: 1;
    position : fixed;
    top: 0%;
    left: 0%;}
 .second {
    z-index: 0;
    position : absolute;
    top: 0%;
    left: 33%;
 }
 .third {
    z-index: 0;
    position : absolute;
    top: 0%;
    left: 66%;
 }
 p{
    top: 0;
    left: 0;
    position: absolute;
    z-index: 0;
 }
</style>
</head>
<body>
<p class="text">This text will stay behind the first image when the window is resized.</p>
<img class = "first" src = "http://www.dubcen.com/uploads/ex.jpg">
<img class = "second" src = "http://www.dubcen.com/uploads/ex.jpg">
<img class = "third" src = "http://www.dubcen.com/uploads/ex.jpg">
</body>
</html>

To achieve this layout, I added a <p> tag for the text and set its z-index to 0. Each image, except the first one, also has a z-index of 0. The first image has a z-index of 1 to ensure it stays on top. The text is positioned absolutely and remains behind the first image even after resizing, but not behind the other images. I hope this explanation clarifies things for you :)

Is there a way to ensure that the text stays positioned behind the initial image even as the window size is adjusted

Answer №1

Answer №2

Answer №3

Similar questions

Get rid of the drop-down shadow effect

Create dynamic and interactive content by embedding text within SVG shapes using the powerful D

Tips for concealing a tab upon selecting an option from a dropdown menu

Elements in Motion

Tips for creating a mobile-friendly Bootstrap carousel that is both scalable and zoomable while maintaining the default slide functionality

Tips for adjusting the wrapper css rule of a Tabs component to left-align text in a vertical tab within Material-UI

What is the best way to position an image in the center over a video using HTML and CSS?

Generate a hyperlink within a paragraph

What is the importance of chaining selectors in order to utilize flexbox effectively?

Getting a specific element from an Ajax response may involve using JavaScript methods to target the desired

The React sidebar expanded to cover the entire screen width

Customize your webpage's style to reflect your unique identity with user

Hide all elements in jQuery that do not have a class assigned

Prevent users from selecting elements on the mobile site

Crafting an iframe that dynamically adjusts with Tailwind CSS

Retrieve the value of a variable from a JSON decoded response

Looking for a way to customize it using @emotion/styled? Dealing with the deprecated makeStyles from MUI problem?

Pressing the 'Enter' key within a textarea in a JQuery

Setting the parent's height to match one of its children

Is there a way to display two cards side by side in mobile view?