How to create Horizontal Scroll Snap Using HTML and CSS ? Last Updated : 18 Aug, 2022 Improve Improve Like Article Like Save Share Report In this project, we are going to create a simple Horizontal Scroll Snap by using HTML and CSS only. Glimpse of Project: Approach: The best way to animate the HTML objects is by using CSS classes and by setting the transitions at different stages. HTML code: Create an HTML file (index.html). Link the CSS file in HTML that provides all the animation’s effect to our HTML. This is also placed in between the <head> tag. Add six anchor <a> tag for creating buttons and assign particular classes to them. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Horizontal Scroll Snap</h1> <div class="main_box"> <!-- img-1 --> <a href="#"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20210223165952/gfglogo.png"> </a> <!-- img-2 --> <a href="#"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20210218121103/resize16136304481344613575img2-300x150.jpg"> </a> <!-- img-3 --> <a href="#"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20210215161411/geeksforgeeksremovebgpreview-300x300.jpg"> </a> <!-- img-4 --> <a href="#"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20210223165952/gfglogo.png"> </a> <!-- img-5 --> <a href="#"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20210218121103/resize16136304481344613575img2-300x150.jpg"> </a> <!-- img-6 --> <a href="#"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20210215161411/geeksforgeeksremovebgpreview-300x300.jpg"> </a> </div> </body> </html> Output: Horizontal Scroll Snap Like Article Suggest improvement Previous Text Animation using HTML & CSS @keyframes Rule Next How to apply inline CSS ? Share your thoughts in the comments Add Your Comment Please Login to comment...