Displaying an overlay when hovering over photos I have some very illogical jQuery code and I want to see if someone finds a better way to do the exact same thing:

jQuery:



$(".col-md-3 img").hover(function() {
  $(this).parent().children(".search").show();
  $(this).parent().children(".photo").css("opacity","0.4");
 }, function(){
  $(this).parent().children(".search").hide();
  $(this).parent().children(".photo").css("opacity","1");
 });
html {
 background-color: #3498db;
}

.photo {
 width:100%;
 height: auto;
 margin: 20px 0px;
}

.search {
 position: absolute;
 margin-left: auto;
 margin-right: auto;
 top:40%;
 left: 0;
 right: 0;
 display: none;
}

.search:hover{
 cursor:pointer;
}
&lt;div class="col-md-3"&gt;
  &lt;img class="photo" src="http://florin-pop.com/work/Photo%20Gallery/img/1_small.jpg" alt="img" /&gt;
  &lt;img class="search hidden-xs" src="http://florin-pop.com/work/Photo%20Gallery/img/search.png" width="50px"/&gt; 
&lt;/div&gt;

&lt;!-- snippet jquery include --&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"&gt;&lt;/script&gt;




I have multiple similar divs.

I don't like the fact that I am accessing the DOM many times with:

$(this).parent().children();


I'm going back and forth and I think it might be a better solution.

The problem with the siblings() method is that one image is on top of the other image, with position absolute and this causes some tricky hover issues. The live website here: live
Instead of 

 $(this).parent().children(".search").show();


you can use 

$(this).siblings(".search").show();