Gif link to center - tags

Question

Trying to get the "About Us" to no go to a separate page, but instead just go to the center of screen.
<div class="w3-col s4">
<h4>About</h4>
<p>About us</p>
<p>Shipping</p>
<p>Payment</p>
</div>

Answer 1

You need a bit different approach.
The tag defines a hyperlink, which is used to link from one page to another. So, it is a normal behaviour that click brings you to another page. But it is not what you want. To show popup, you can use javascript.
There are different approaches you can use like Bootstrap Modals, jQuery or W3C.CSS Modals. I see, that you use classes from W3C.CSS. You can read about W3C.CSS Modals here.
You can also use a pure JS. Exactly this approach I show here. Basically, the idea is the following. You have a hidden component styled so that it appears in the center of the screen (like a modal). The modal is hidden by default. There is a JS function that makes the modal visible. Clicking your link you triggers this function. Look at the code below.
function showGif() {
document.getElementById('box').classList.remove('hidden');
}
.box {
display: flex; /* defines a flex container */
align-items: center; /* aligns content vertically */
justify-content: center; /* aligns items horizontally */
height: 100vh; /* makes the block fit all the viewport's width */
width: 100vw; /* makes the block fit all the viewport's height */
position: absolute; /* needs to overlay other elements */
}
.hidden {
display: none;
}
<div class="w3-col s4">
<h4>About</h4>
<p>About us</p>
<p>Shipping</p>
<p>Payment</p>
</div>
<div id="box" class="box hidden">
<img src="https://www.linkpicture.com/q/unnamed_10.gif" />
</div>
I didn't implement the functionality of hidding the modal. And CSS is probably not perfect. It is just an example to show you the idea. So, the final implenetaion is up to you. I hope, it will help.