As a complete newbie taking my first steps in front-end development, I spent most of my day trying to work out an animation function but couldn't quite get it right. Below are the snippets of HTML, CSS, and JavaScript codes:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Белточчо</title>
<link rel="stylesheet" href="main.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<header>
<img class="logo" src="images/logo_green.jpg" alt="logo">
<div class="top-contacts">
<h1> Belltocco Company</h1>
<p> Paper production of all kinds in Kaliningrad</p>
<div class="details">
<img src="images/phone.png" alt="phone icon" width="25px"> <p>+7(4012)778080</p>
<img src="images/map_locator.png" alt="map icon" width="25px"> <p>25 Kant str. Kaliningrad</p>
<img src="images/mail.png" alt="mail icon" width="25px"> <p><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="01686f676e4163646d756e62626e2f7374">[email protected]</a></p>
</div>
</div>
</header>
<section>
<div class="product">
<div class="viewport-first" id="viewport1">
<a href="#">
<span class="dark-background">Toilet paper<br><em>min order: 5000 each<br>quality: iso 9001<br>Lorem Ipsum: 5000<br>Lorem Ipsum: 1000</em></span>
<img src="images/discharger.jpg" alt="discharger">
</a>
</div>
<div class="viewport" id="viewport2">
<a href="#">
<span class="dark-background">Toilet paper<br><em>min order: 5000 each<br>quality: iso 9001<br>Lorem Ipsum: 5000<br>Lorem Ipsum: 1000</em></span>
<img src="images/napkin-table.jpg" alt="napkin-table">
</a>
</div>
<div class="viewport" id="viewport3">
<a href="#">
<span class="dark-background">Toilet paper<br><em>min order: 5000 each<br>quality: iso 9001<br>Lorem Ipsum: 5000<br>Lorem Ipsum: 1000</em></span>
<img src="images/napkin.jpg" alt="napkin">
</a>
</div>
<div class="viewport" id="viewport4">
<a href="#">
<span class="dark-background">Toilet paper<br><em>min order: 5000 each<br>quality: iso 9001<br>Lorem Ipsum: 5000<br>Lorem Ipsum: 1000</em></span>
<img src="images/toilet_paper.jpg" alt="toilet">
</a>
</div>
<div class="clear"></div>
<script>
// JavaScript code for animation and click events
</script>
</div>
</section>
/* CSS Reset Styles */
After hovering on the image, text appears, and clicking on the image causes all four images to shrink and group on the left side as shown in these images:
Image 1 example
Image 2 example
Currently struggling to implement a feature where after clicking, the grouped images scale down and shift to the left, making room for a rectangular box on the right displaying additional information about the clicked product. Also looking to associate click events with specific products to show relevant details in the info box on the right.