Select whole body except one element

Question

I am trying to select all body elements in jQuery except "this", or one that is hanging on. I am trying to make the body go to a certain opacity, but "this" to keep it opaque. This is my code:

$(".content img").mouseenter(function() {
    $(this).animate({
        opacity: "1",
    });

    $("body").find('*').not($(this)).animate({
        opacity: "0.4",
    });
});  







    <div class="content">
            <div class="row">
                <div class="col-md-2">
                    <h4>Handbags</h4>
                    <img src="FullSizeRender (1).jpg" />
                </div>

                <div class="col-md-2">
                    <h4>Beach bags</h4>
                    <img src="FullSizeRender (2).jpg" />
                </div>

                <div class="col-md-2">
                    <h4>Purses</h4>
                    <img src="IMG_5213.JPG" />
                </div>

                <div class="col-md-2">
                    <h4>Bottle carriers</h4>
                    <img src="FullSizeRender (5).jpg" />
                </div>

                <div class="col-md-2">
                    <h4>Baskets</h4>
                    <img src="img1.jpg" />
                </div>
            </div>


            <div class="row">
                <div class="col-md-2">
                    <h4>Vases</h4>
                    <img src="img2.jpg" />
                </div>

                <div class="col-md-2">
                    <h4>Placemats</h4>
                    <img src="img6.jpg" />
                </div>

                <div class="col-md-2">
                    <h4>Coasters</h4>
                    <img src="IMG_4665.JPG" />
                </div>

                <div class="col-md-2">
                    <div class="tiss">
                        <h4>Tissue box covers</h4>
                        <img src="img3.jpg" />
                    </div>
                </div>

                <div class="col-md-2">
                    <div class="ornament">
                        <h4>Holiday ornaments</h4>
                        <img src="img4.jpg" />
                    </div>
                </div>
            </div>
    </div>

Answer 1

Try the following: use CSS to handle the hover set new height, when it does not freeze, the height will revert to what you have before.

Also with hover and callback (not hover) you can set all the others to opacity: "0.4"on hover and reset everything when the mouse exits ( opacity: "1")

$(".content").hover(function() {
  $(this).css("cursor", "pointer");
  $("body").find("*").not(this).animate({
    opacity: "0.4"
  }, 1000);
}, function() {
  $("body").find("*").stop().animate({
    opacity: "1"
  }, 0);
});

div {
  width: 50px;
  height: 50px;
  display: inline-block;
  background: green;
}

.heigher {
  height: 100px;
}

.content:hover {
  height: 200px;
  -webkit-transition: height 1s linear;   
  -moz-transition: height 1s linear;   
  -ms-transition: height 1s linear;   
  -o-transition: height 1s linear;   
  transition: height 1s linear; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">content 1</div>
<div class="content">content 2</div>
<div class="content">content 3</div>
<div class="content heigher">content 4</div>
<div class="content">content 5</div>
<div class="content heigher">content 6</div>

Run codeHide result

UPDATED Version:

$(".content img").mouseenter(function() {
  $(this).parent().animate({
    opacity: "1",
  });

  $(".content").find('img').not($(this)).parent().animate({
    opacity: "0.4",
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="content">
  <div class="row">
    <div class="col-md-2">
      <h4>Handbags</h4>
      <img src="FullSizeRender (1).jpg" />
    </div>

    <div class="col-md-2">
      <h4>Beach bags</h4>
      <img src="FullSizeRender (2).jpg" />
    </div>

    <div class="col-md-2">
      <h4>Purses</h4>
      <img src="IMG_5213.JPG" />
    </div>

    <div class="col-md-2">
      <h4>Bottle carriers</h4>
      <img src="FullSizeRender (5).jpg" />
    </div>

    <div class="col-md-2">
      <h4>Baskets</h4>
      <img src="img1.jpg" />
    </div>
  </div>


  <div class="row">
    <div class="col-md-2">
      <h4>Vases</h4>
      <img src="img2.jpg" />
    </div>

    <div class="col-md-2">
      <h4>Placemats</h4>
      <img src="img6.jpg" />
    </div>

    <div class="col-md-2">
      <h4>Coasters</h4>
      <img src="IMG_4665.JPG" />
    </div>

    <div class="col-md-2">
      <div class="tiss">
        <h4>Tissue box covers</h4>
        <img src="img3.jpg" />
      </div>
    </div>

    <div class="col-md-2">
      <div class="ornament">
        <h4>Holiday ornaments</h4>
        <img src="img4.jpg" />
      </div>
    </div>
  </div>
</div>

Run codeHide result

Answer 2

, , , , , , , - .

, . - "mask" ( div) - (ala rgba(255,255,255,0.5)). , , , z-index, , , , div , , , .

, . , ? , ? , , .