Changing background opacity with jQuery

Question

How to change opacity of the background image while hovering over a div with text? I tried to add opacity to hover but it affected text too so I assume It can be done only using jQuery since I can't change the HTML structure.

.wrapper {
  margin: 0 auto;
  max-width: 940px;
  background: #EBEBEB;
}
.border__flex {
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ideas__gallery div {
  margin: 10px;
}
.ideas__gallery__h4 {
  text-decoration: none;
  font-weight: bold;
  color: #fff;
  font-size: 22px;
  line-height: 1.2em;
  padding: 0;
  margin: 0;
}
.one:hover .ideas__gallery__h4,
.two:hover .ideas__gallery__h4,
.three:hover .ideas__gallery__h4,
.four:hover .ideas__gallery__h4,
.five:hover .ideas__gallery__h4,
.six:hover .ideas__gallery__h4,
.seven:hover .ideas__gallery__h4 {
  color: #ff5b5d;
  transition: all 0.2s ease-in;
}
.ideas__gallery__h3 {
  color: #333;
  font-weight: bold;
  font-size: 22px;
  text-align: center;
  margin-bottom: 34px;
}
.one {
  width: calc(33.3333333333333333% - 20px);
  height: 310px;
  background: url('http://carwallstar.com/wp-content/uploads/2014/11/ford-car-images2015-ford-mustang--2015-ford-mustang-29-----froggpondcom-w8lqchv6.jpg') 100% 100% no-repeat;
  background-size: cover;
  float: left;
  text-align: center;
}
.two {
  width: calc(33.3333333333333333% - 20px);
  height: 310px;
  background: url('http://www.jdpower.com/sites/default/files/legacy_files/pictures/j/jdpower/0981/d6be82ef8f0dfc684d7aed8755d13dcbx.jpg') 50% 100% no-repeat;
  background-size: cover;
  float: left;
  text-align: center;
}
.three {
  width: calc(33.3333333333333333% - 20px);
  height: 310px;
  background: url('http://www.pageresource.com/wallpapers/wallpaper/ford-mustang-shelby-gt-nice-cars.jpg') 50% 100% no-repeat;
  background-size: cover;
  float: left;
  text-align: center;
}
.four {
  width: calc(33.3333333333333333% - 20px);
  height: 310px;
  background: url('http://7-themes.com/data_images/out/75/7029170-ford-cars-wallpaper.jpg') 50% 100% no-repeat;
  background-size: cover;
  float: left;
  text-align: center;
}
.five {
  width: calc(66.6666666666666667% - 20px);
  height: 310px;
  background: url('http://img.otodriving.com/files/2015/10/Ford-www.otodriving.com-HD-33.jpg') 50% 100% no-repeat;
  background-size: cover;
  float: left;
  text-align: center;
}
.six {
  width: calc(66.6666666666666667% - 20px);
  height: 310px;
  background: url('http://resources.carsguide.com.au/styles/cg_hero_large/s3/ford-mustang-2015-v8-gt-(2).jpg') 50% 100% no-repeat;
  background-size: cover;
  float: left;
  text-align: center;
}
.seven {
  width: calc(33.3333333333333333% - 20px);
  height: 310px;
  background: url('http://carsformula.com/wp-content/uploads/2014/10/2015-Ford-Mustang-50-Year-Limited-Edition-Specs.jpg') 80% 100% no-repeat;
  background-size: cover;
  float: left;
  text-align: center;
}
@media screen and (max-width: 420px) {
  /* ------- Footer Media Queries 320px------- */
  .one,
  .two,
  .three,
  .four,
  .five,
  .six,
  .seven {
    float: none;
    width: 100%;
    height: 100px;
    text-decoration: none;
  }
}

<div class="wrapper">
  <div class="ideas__gallery">
    <h3 class="ideas__gallery__h3"> Title</h3>
    <a href="#">
      <div class="one border__flex">
        <h4 class="ideas__gallery__h4">Headline Three Words</h4>
      </div>
    </a>
    <a href="#">
      <div class="two border__flex">
        <h4 class="ideas__gallery__h4">Headline Three Words</h4>
      </div>
    </a>
    <a href="#">
      <div class="three border__flex">
        <h4 class="ideas__gallery__h4">Headline Four Nice Words</h4>
      </div>
    </a>
    <a href="#">
      <div class="four border__flex">
        <h4 class="ideas__gallery__h4">One</h4>
      </div>
    </a>
    <a href="#">
      <div class="five border__flex">
        <h4 class="ideas__gallery__h4">Headline Three Words</h4>
      </div>
    </a>
    <a href="#">
      <div class="six border__flex">
        <h4 class="ideas__gallery__h4">One</h4>
      </div>
    </a>
    <a href="#">
      <div class="seven border__flex">
        <h4 class="ideas__gallery__h4">One</h4>
      </div>
    </a>
  </div>
</div>

I'm downvoting this, it's been answered many many times before. — , Nov 10 '15 at 12:44
Possible duplicate of http://stackoverflow.com/questions/29444206/make-html-body-background-image-transparent — , Nov 10 '15 at 12:47
Why did you ask this [question again](http://stackoverflow.com/questions/33629151/change-background-opacity-while-hovering-over-text)? It was already a duplicate. — Rory McCrossan, Nov 10 '15 at 12:56

score 1 · Accepted Answer · answered Nov 10 '15 at 12:43

you can use a trick like this

set the background to the :after

.one:after {
  background: url('http://carwallstar.com/wp-content/uploads/2014/11/ford-car-images2015-ford-mustang--2015-ford-mustang-29-----froggpondcom-w8lqchv6.jpg') 100% 100% no-repeat;
  background-size: cover;
  content: "";
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;  
}

source: https://css-tricks.com/snippets/css/transparent-background-images/

score 1 · Answer 2 · answered Nov 10 '15 at 12:46

1

My suggestion to you would be to use a picture editing software (such as PhotoShop) in order to change the opacity on the background images. Then, save these images into another file and in your CSS, change the background: url() to the less opaque images.

answered Nov 10 '15 at 12:46

Nathangrad

1,426
10
25

A valid approach, but beware of the fact animating the transition between the states wouldn't be possible by simply swapping out the 'url' part of the background-image attribute. – Nov 10 '15 at 12:47

score -1 · Answer 3 · answered Nov 10 '15 at 12:41

You can't change the opacity of a background image.

You can:

Use a background colour specified with an alpha channel
Set the opacity of an entire element
Use an image format with a built in opacity (such as PNG)

One approach is to restructure your content so that the background image is on an element that is a sibling of an element containing your content, absolutely positioning one or both of them, and then changing the opacity of the former. This introduces the challenge of setting everything to the desired height.

Changing background opacity with jQuery

3 Answers3