Changing background image when hovering on a list item

Question

As you can see in the screenshot, I\'ve got an unordered list. Now the div of this list has a background image. What I want to do is to change background\'s ima

Answer 1

You can do this by CSS only. It's a trick and in the most of the cases you will need to use JS, but its working and working good! (See it in Full Page)

.wrapper {
  width:900px;
  height:600px;
  position:relative;
}

.item {
  position:relative;
  z-index:1;
}

.bg {
  position:absolute;
  top:0;
  left:0;
      width: 100%;
    height: 100%;
}

.bg img {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  opacity:0;
  transition:all .3s ease;
}

.bg img:nth-child(1),
.item:nth-child(1):hover ~ .bg img:nth-child(1),
.item:nth-child(2):hover ~ .bg img:nth-child(2),
.item:nth-child(3):hover ~ .bg img:nth-child(3) {
  opacity:1;
}

    
Item 1
    
Item 2
    
Item 3