I have a lovely working solution that when you hover the image it swaps out and fades in the other image however i position a button above the image and wondering if its possible to fade the background as well when you hover the button?

```css
ul li {
  position: relative;
  height: 143px;
}
.ty-btn {
  background: #ffffff;
  position: absolute;
  bottom: 10px;
  left: 10px;
}
.category-switch {
  display: block;
}
.category-switch img {
  position: absolute;
  width: 400px;
}
.category-switch {
  display: inline-block;
}
.category-switch .ty-btn > img,
.category-switch img {
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}
.category-switch .ty-btn:hover > img,
.category-switch img.top:hover {
  opacity: 0;
}
```

```html
<ul>
  <li class="ty-subcategories__item">
    <a href="http://2015.ambientlounge.com/interior/gold-class-bean-bags/acoustic-sofa-bean-bags/" class="category-switch ty-subcategories-block__a">
      <img class="ty-pict  ty-subcategories-img  " src="http://2015.ambientlounge.com/images/detailed/4/category-panel-acoustic-hover.jpg?t=1438185134" alt="" title="">
      <img class="ty-pict  ty-subcategories-img top  " src="http://2015.ambientlounge.com/images/category/4/category-panel-acoustic.jpg?t=1438185134" alt="" title="">
      <span class="ty-btn ty-btn__primary">Shop Now</span>
    </a>
  </li>
</ul>
```