Search code examples
csshtmlhoverbackground-image

Change background img hover for separate columns as part of Wordpress theme


I am working with a Bolts theme in Wordpress. There is a Heroes widget for the main page with 3 "columns". I want to have a different picture for each element and then a different image yet again on the :hover effect.

The 3 static image appear as they should. However, the hover images only show the third selector's declaration to show image 135-3.jpg.

How do I get the first 2 images to be the hover images instead of the third image appearing in all three boxes?

.hero-columns__item {
  background-image: url('http://newsite.com/wp-content/uploads/2019/02/MainPageBannersResidential.jpg');
}

.hero-columns__item:hover {
  background-image: url('http://newsite.com/wp-content/uploads/2016/04/171-5.jpg') !important ;
}

.hero-columns__item {
  background-image: url('http://newsite.com/wp-content/uploads/2019/02/MainPageBannersTerraceHousing2.jpg');
}

.hero-columns__item:hover {
  background-image: url('http://newsite.com/wp-content/uploads/2016/04/177-5.jpg') !important;
}

.hero-columns__item {
  background-image: url('http://newsite.com/wp-content/uploads/2019/02/MainPageBannersDevelopments.jpg');
}

.hero-columns__item:hover {
  background-image: url('http://newsite.com/wp-content/uploads/2016/04/135-3.jpg') !important;
}

Solution

  • The problem is that the selector .hero-columns__item targets all three elements, and when you specify the background-image in the final .hero-columns__item:hover selector, it overwrites the background-image set by the previous two. Thus, the final background-image you set will be applied to all three elements.

    To correct this, you'll need selectors that specifically target only the first, second and third elements respectively. This can be done by making use of the pseudo-selector nth-of-type:

    .hero-columns__item:nth-of-type(1) {
      background-image: url('http://newsite.com/wp-content/uploads/2019/02/MainPageBannersResidential.jpg');
    }
    
    .hero-columns__item:nth-of-type(1):hover {
      background-image: url('http://newsite.com/wp-content/uploads/2016/04/171-5.jpg');
    }
    
    .hero-columns__item:nth-of-type(2) {
      background-image: url('http://newsite.com/wp-content/uploads/2019/02/MainPageBannersTerraceHousing2.jpg');
    }
    
    .hero-columns__item:nth-of-type(3):hover {
      background-image: url('http://newsite.com/wp-content/uploads/2016/04/177-5.jpg');
    }
    
    .hero-columns__item:nth-of-type(3) {
      background-image: url('http://newsite.com/wp-content/uploads/2019/02/MainPageBannersDevelopments.jpg');
    }
    
    .hero-columns__item:nth-of-type(3):hover {
      background-image: url('http://newsite.com/wp-content/uploads/2016/04/135-3.jpg');
    }
    

    Here, each element has a different selector, so only one of the rules will be applied to each. Note that :hover can still be chained to the pseudo-selector, as is shown above.

    Also, don't use !important; it carries maximum specificity, and should be avoided unless absolutely necessary. I've removed their usages in my code above.