$(".mask").click(function(){ var test = $(".mask").prev(); // var img = test2; var src = test.attr("src"); $(".galary_content").append("<div class='wrap_img_portfolio '>"+"<div class='wrap_bg_portfolio'></div>"+"<img src="+src+" class='me_portfolio_img ' />"+"</div>"); $(".wrap_img_portfolio").fadeIn(800); $(".wrap_bg_portfolio").click(function(){ $(".wrap_img_portfolio").fadeOut(800); $(".wrap_img_portfolio").remove(); }); }); 
  <div class="img_content_all"> <img src="../Shablon_16/image/image_portfolio/slidepf1.jpg" alt="" class="image_portfolio"> <div class="mask"> <div class="plus"></div> </div> </div> <div class="img_content_all"> <img src="../Shablon_16/image/image_portfolio/slidepf1.jpg" alt="" class="image_portfolio"> <div class="mask"> <div class="plus"></div> </div> </div> <div class="img_content_all"> <img src="../Shablon_16/image/image_portfolio/slidepf1.jpg" alt="" class="image_portfolio"> <div class="mask"> <div class="plus"></div> </div> </div> <div class="img_content_all"> <img src="../Shablon_16/image/image_portfolio/slidepf1.jpg" alt="" class="image_portfolio"> <div class="mask"> <div class="plus"></div> </div> </div>

And so the problem is as follows! If you take a picture and add .click() to the picture, then everything works! But the fact is that the picture has a hover mask! It turns out that I click on the picture, nothing happens because when you hover it overlaps the mask layer (.mask)! The problem is the following, when I click on any of the pictures always appears 1 how to fix?

    1 answer 1

      $(".mask").click(function(){ var img = $(this).prev(); var src = img.attr("src"); $(".galary_content").append("<div class='wrap_img_portfolio '>"+"<div class='wrap_bg_portfolio'></div>"+"<img src="+src+" class='me_portfolio_img ' />"+"</div>"); $(".wrap_img_portfolio").fadeIn(800); $(".wrap_bg_portfolio").click(function(){ $(".wrap_img_portfolio").fadeOut(800); $(".wrap_img_portfolio").remove(); }); });

    I solved the problem by rewriting the jquery code!