Creating a Dynamic Image Gallery Page with HTML and CSS: A Step-by-Step Guide


In this blog post, we will explore how to create a dynamic image gallery page using HTML and CSS. This tutorial is aimed at those with basic knowledge of HTML and CSS, looking to add interactive elements to their web pages. We will focus on the ‘image hover effect’ or ‘image card hover effect’, which enlarges images when hovered over, creating an engaging user experience.

Setting Up The Basic Structure

Let’s start by setting up our HTML page:

  •  Begin by creating a new HTML file.
  • Use the standard HTML tags to structure your page.
  • Inside your <body>, define a div with a class of container. This will be used to reference sub-elements later.
  • Create four div elements within the container, each assigned to the box class.
<div class="container">
    <div class="box"><img src="" /></div>
    <div class="box"><img src="" /></div>
    <div class="box"><img src="" /></div>
    <div class="box"><img src="" /></div>

Initially, your page will appear blank as we haven’t added any styles yet.

Styling Basics

  • You can add styles directly between <head> tags or link to an external CSS file.
  • Assign a background color to your body tag. While any color can be used, we’ll start with white for simplicity.
  • Define a width for your container class and center it using margin: 0 auto;.
  • Add padding to the top and bottom of the container to avoid elements sticking to the page edges.
.container {
    width: 80%;
    margin:0 auto;
    padding: 80px 0;
    display: flex;
    flex-direction: row;
    justify-content: center;

.box {
    width: 150px;
    height: 150px;
    background: gray;
    margin: 0px 14px;
    transition: 0.5s;

.box img {border-radius: 6px;}

.box:hover {
    transform: scale(1.2);
    background: black;
    z-index: 2;

Styling the Boxes

  • Assign width and height to each box class div. For this example, we’ll use 150px for both.
  • Initially, boxes will stack vertically. To align them horizontally, apply the flex property to the container. Also, assign different background colors to each box for visibility.

Implementing the Hover Effect

Basics of the Hover Effect

  • Add margins to each box to visually separate them.
  • Use the transition property on the boxes for a smooth hover effect. For example, transition: all 0.5s; means the effect will take 0.5 seconds.

Scaling on Hover

  • When a box is hovered over, use the transform: scale(x); property to enlarge it. The value of x determines how much the box grows. For instance, scale(1.2) means the box grows 20% larger than its original size.

Adding Images

Implementing Images

  • Use an image placeholder service like Picsum for demonstration. Add <img> tags inside each box div with the source set to different Picsum URLs.
  • Ensure the images fit the boxes by setting their width and height appropriately in CSS.

Styling Images

  • Apply border-radius to images for rounded corners.
  • Experiment with shadows, borders, or other CSS properties to enhance the appearance.

Fine-Tuning the Hover Effect

  • Play with different scale values and transition durations to achieve the desired effect.
  • Ensure your gallery looks good on different screen sizes by using responsive design techniques.


By following these steps, you have created a dynamic image gallery with an engaging hover effect using HTML and CSS. Experiment with different styles and animations to personalize your gallery. If you found this tutorial helpful, consider subscribing to my YouTube channel for more web development tips and tricks.