How does Google Images's page extension effect work?

Question

I'd like to use the page extension effect that Google Images uses on my own website. When you click on an image, the image is "revealed" in a larger size in that black window, just above where you clicked. This is what I'm referring to.

I want something like that, except what I'm clicking on is a html card(a square of information) and what is revealed is more information pertaining to that card, displayed in that same, full-page-width fashion.

I tried inspecting it on Chrome's DevTools but I had too much trouble trying to understand it, and I'm hoping I can get a simpler explanation here. I imagine Javascript is involved, which I'm not very good at, So I would appreciate if someone can provide the specific tools of Javascript that I should go research so that can create that effect.

Answer 1

I figured out google's algorithms:

 let _card = document.getElementsByClassName('card')[0]; let _modal = document.getElementsByClassName('modal')[0]; _card.addEventListener('click', function() { _modal.classList.toggle('active'); });

 .card, .modal { padding: 20px; border: 1px solid green; } .modal { display: none; background-color: #bbb; } .modal.active { display: block; }

 <div class="card"> <p>Name: Johnny</p> <p>Occupation: Apple seed planter</p> <p>Age: 28</p> </div> <div class="modal"> <p>More info on Johnny....</p> <p>Hobbies: Apples</p> <p>Favorite Movie: The Matrix</p> </div>