CODEWITHSUNDEEP
htmlcss
usernameisnotprogrammedyet
usernameisnotprogrammedyet

Reputation: 171

position one image in front of another

I have positioned an image carefully. I want to add another image behind it so that, when I hover over the original, it's opacity is reduced showing the new image. But for some reason the new image is underneath the original image. How can I position it behind the original image?

.vid-content-vids {
  float: left;
  width: 200px;
  height: 200px;
  margin: .5%;
  padding-bottom: 25px;
}
.vid-content-vids img {
  position: relative;
  left: 18%;
}
.vid-content-vids img.videos-hover {
  position: relative;
  top: 0px;
  left: 18%;
}
.vid-content-vids h1 {
  font-family: Arial;
  font-weight: bolder;
  font-size: 15px;
  word-wrap: break-all;
  width: 200px;
  margin-left: 10%;
}
img.videos:hover {
  opacity: 0.4
}
<div class="vid-content-vids">
  <a href="#"><img src="http://lorempixel.com/150/150/abstract/1/" class="videos" style="height:150px; width:150px;"></a>
  <a href="#"><img src="http://lorempixel.com/150/150/abstract/2/" class="videos-hover" style="height:150px; width:150px; margin: 0px;"></a>
  <a href="#"><h1 style="margin-left: 10%;">Carlton is called a sellout</h1></a>
</div>

Upvotes: 1

Views: 2766

Answers (1)

sleepDrifter
sleepDrifter

Reputation: 591

Use absolute positioning inside a relatively positioned container. Give the bottom image a -1 z-index.

.vid-content-vids {
  position: relative;
}
.videos,
.videos-hover {
  position: absolute;
  top: 0px;
  left: 0px;
}
.videos-hover {
  z-index: -1;
}
.videos:hover {
  opacity: 0.4;
  cursor: pointer;
}
<div class="vid-content-vids">
  <img src="http://lorempixel.com/150/150/abstract/1/" class="videos" style="height:150px; width:150px;">
  <img src="http://lorempixel.com/150/150/abstract/2/" class="videos-hover" style="height:150px; width:150px; margin: 0px;">


</div>

Upvotes: 3

Related Questions