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