Learn to Create WordPress Themes by Building 5 Projects

Creating animation on the single page

Now, we will use an animation on the single.html page. Open the single.html file with the Sublime Text editor.

Next, we will link each of the images on the home page to the single.html page. We'll just link the first one here. In the index.html page, put the <a> tag that will go to single.html as shown in the following code:

<div class="w3-col m9 l9">  <div class="w3-row">    <div class="w3-col m4 l4 pic">      <a href="single.html">        <img src="images/1.jpg" class="w3-animate-opacity">      </a>    </div>  

You could put this tag for the rest of the images if you want, but it doesn't really matter. This is just the HTML; this isn't the actual theme.

Refresh the home page and click on the first image. This will take us ...