title: How to remove hover state
body: <p>1) I created an image with an opacity of 1. When you hover over it, the opacity becomes .3 and a button appears over the image. The problem, is that when you hover over the button, the opacity of the image returns to 1. How can I make the opacity of the image stay .3 when the hover is both over the image OR the button?</p>
  
  <p>2) When you click play, the original image changes to a new image. But since the mouse is over the image, the new image has an opacity .3. How can I set the new image to have an opacity of 1 even when its hovered? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var originalImgSrc = $('img').attr('src');
  
  // Change image on button click
  $(".the-buttons").click(function() {
  
    $('img').attr("src", "https://s3.amazonaws.com/blitzbase-assets/assets/2.gif");
    $(this).addClass("hide");
  });
  
  //Restore image on mouse out
  $('.show-image img').mouseout(function() {
    $('img').attr("src", originalImgSrc);
    $('.the-buttons').removeClass("hide");
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div.show-image {
    position: relative;
    float: left;
    margin: 0px;
    padding: 0px;
    background: #333;
  }
  
  div.show-image img {
    opacity: 1;
    background: white;
  }
  
  div.show-image img:hover {
    opacity: .3;
    -webkit-transition: opacity .2s ease-in-out;
  }
  
  div.show-image:hover input {
    display: block;
  }
  
  div.show-image input {
    position: absolute;
    display: none;
    top: 100px;
    left: 100px;
  }
  
  div.show-image input.hide {
    display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="show-image"&gt;
    &lt;img src="https://via.placeholder.com/100.png/09f/fff" /&gt;
    &lt;input class="the-buttons" type="button" value="Play" /&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>