У меня в футере 5 картинки,я хочу чтобы при нажатии на них посредине экрана сверху высвечивалась информация [дубликат]

$(document).ready(function() { 
  $('.footer img').on('click', function() { 
    $(this).toggleClass('active'); 
    if ($(this).hasClass("active")) { 
      $("#desc").html($(this).data("about1")); 
      $(".content").html($(this).data("about2")); 
    } else 
      $("#desc, .content").html(""); 
  }); 
  $('body').css('background', 'url(file:///C:/Users/naza1/Desktop/jQuery/images/1.jpg )') 
});

* { 
  margin: 0; 
  padding: 0; 
} 
 
html, 
body { 
  height: 100%; 
} 
 
.wrapper { 
  display: flex; 
  flex-direction: column; 
  height: 100%; 
} 
 
.content { 
  flex: 1 0 auto; 
  text-align: center; 
} 
 
.footer { 
  flex: 0 0 auto; 
  text-align: center; 
} 
 
img { 
  border: 1px solid blue; 
  height: 50px; 
  width: 70px; 
  display: inline-block; 
} 
 
#desc { 
  text-align: center; 
} 
 
.image_cart { 
  display: block; 
} 
 
.image_cart img { 
  width: 100%; 
  max-width: 150px; 
  height: 100%; 
  object-fit: cover; 
} 
 
.image_cart:not(.active) .description { 
  display: none; 
  font-size: x-large; 
  text-align: center; 
} 
 
.hidden { 
  display: none; 
} 
 
#somedesc { 
  font-size: x-large; 
  text-align: center; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<div id="desc"></div> 
<div class="wrapper"> 
  <div class="content">Чтооо?</div> 
  <div class="footer"> 
    <img src="file:///C:/Users/naza1/Desktop/jQuery/images/1.jpg" alt data-about1="<h3>зверь 1</h3><p>что-то о звере 1</p>" data-about2="на картинке зверь 1" /> 
    <img src="file:///C:/Users/naza1/Desktop/jQuery/images/2.png" alt data-about1="<h3>зверь 2</h3><p>что-то о звере 2</p>" data-about2="на картинке зверь 2" /> 
    <img src="file:///C:/Users/naza1/Desktop/jQuery/images/3.png" alt data-about1="<h3>зверь 3</h3><p>что-то о звере 3</p>" data-about2="на картинке зверь 3" /> 
    <img src="file:///C:/Users/naza1/Desktop/jQuery/images/4.png" alt data-about1="<h3>зверь 4</h3><p>что-то о звере 4</p>" data-about2="на картинке зверь 4" /> 
    <img src="file:///C:/Users/naza1/Desktop/jQuery/images/5.png" alt data-about1="<h3>зверь 5</h3><p>что-то о звере 5</p>" data-about2="на картинке зверь 5" /> 
  </div> 
</div>

$(document).ready(function() { 
  $('.image_cart').on('click', function() { 
    if ($(this).hasClass('active')) 
      $(this).removeClass('active'); 
    else { 
      $('.image_cart.active').removeClass('active'); 
      $(this).addClass('active'); 
    } 
    $('body').css('background', 'url(file:///C:/Users/naza1/Desktop/jQuery/images/1.jpg )') 
  }); 
});

.image_cart { 
  display: block; 
} 
 
.image_cart img { 
  width: 100%; 
  max-width: 150px; 
  height: 100%; 
  object-fit: cover; 
} 
 
.image_cart:not(.active) .description { 
  display: none; 
  font-size: x-large; 
  text-align: center; 
} 
 
.hidden { 
  display: none; 
} 
 
#somedesc { 
  font-size: x-large; 
  text-align: center; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<div class="image_cart"> 
 <div class="description"> 
    <h3 style="text-align:center">Лев</h3> 
    <p style="text-align:center">Вид хищных млекопитающих, один из четырёх представителей рода пантер, относящегося к подсемейству больших кошек в составе семейства кошачьих. Наряду с тигром — самая крупная из ныне живущих кошек, масса некоторых самцов может достигать 250 кг.</p> 
  </div> 
 <img src="file:///C:/Users/naza1/Desktop/jQuery/images/2.png" descSelector="#somedesc" alt="No image" class="img-2" /> 
   
</div> 
 
<div class="image_cart">      
  <div class="description"> 
    <h3 style="text-align:center">Барс</h3> 
    <p style="text-align:center">Бла-бла-бла</p> 
  </div> 
<img src="file:///C:/Users/naza1/Desktop/jQuery/images/3.png" descSelector="#somedesc" alt="No image" class="img-3" /> 
</div> 
 
<div class="image_cart">       
  <div class="description"> 
    <h3 style="text-align:center">Тигр</h3> 
    <p style="text-align:center">Бла-бла-бла</p> 
  </div> 
<img src="file:///C:/Users/naza1/Desktop/jQuery/images/4.png" descSelector="#somedesc" alt="No image" class="img-4" /> 
</div> 
 
<div class="image_cart">      
  <div class="description"> 
    <h3 style="text-align:center">Пума</h3> 
    <p style="text-align:center">Бла-бла-бла</p> 
  </div> 
<img src="file:///C:/Users/naza1/Desktop/jQuery/images/5.png" descSelector="#somedesc" alt="No image" class="img-5" /> 
</div> 
 
 
<div id="somedesc" class="hidden"> 
  <p><b>Лев</b></p>Вид хищных млекопитающих, один из четырёх представителей рода пантер, относящегося к подсемейству больших кошек в составе семейства кошачьих. Наряду с тигром — самая крупная из ныне живущих кошек, масса некоторых самцов может достигать 
  250 кг.</div>

* { 
  margin: 0; 
  padding: 0; 
} 
html, 
body { 
  height: 100%; 
} 
.wrapper { 
  display: flex; 
  flex-direction: column; 
  height: 100%; 
} 
.content { 
  flex: 1 0 auto; 
  text-align: center; 
} 
.footer { 
  flex: 0 0 auto; 
  text-align: center; 
} 
img { 
  border: 1px solid blue; 
  height: 50px; 
  width: 70px; 
  display: inline-block; 
}

<html> 
<body> 
 
<div class="wrapper"> 
 
  <div class="content">Text</div> 
 
  <div class="footer"> 
    <img src="" alt /> 
    <img src="" alt /> 
    <img src="" alt /> 
    <img src="" alt /> 
    <img src="" alt /> 
  </div> 
 
</div> 
 
</body> 
</html>