How to create a photo gallery in HTML, CSS

This may seem like a daunting task, but it opens up a lot of design and functionality possibilities. In this article, we'll show you how to create a video gallery for your website using HTML and provide a ready-made code example to make the process easier.

Let's create a video gallery using a sample. Let's say we have a travel website where we need to post several videos about different regions.

Each video is presented as a block with a title. When hovered over, the block smoothly increases, and when clicked, the video starts in the player.

Before the main work:

Let's prepare the video files and place them in a separate folder inside the document.
Let's create the files: index.html - for markup, style.css - for styles, main.js - for scripts.
In the index.html file, inside the <head> tag, you need to specify links to other files and add the auxiliary jquery library. It all looks something like this:

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
    <script src="main.js"></script>
  </head>

Now let's start creating the gallery by following the steps below.

HTML structure

Open the index.html file.

Inside the <body> tag, insert a heading with the <h1> tag and the text "Traveling in Russia".

Next, create a div container for the gallery with the class "gallery".

<h1>Traveling in Russia</h1>
<div class="gallery">
</div>

Inside this container will be the wrapper blocks for the titles and videos.

<div class="gallery">
  <div class="wrap_video_item">
    <h3></h3>
  </div> <!-- END wrap_video_item -->
</div> <!-- END gallery -->

Now we need to upload the video to our gallery. To do this, inside the wrapper <div class="wrap_video_item"> we will place a block using the <div> tag and the "video_item" class. Inside it we will add a video. To do this, we will use the <video> element, which contains the src attribute indicating the path to the video file, and controls to add player controls. Since at the very beginning we placed the files in a separate folder, our path looks like this: video/file_name. As an example, we will place a video about St. Petersburg and immediately write this in the title.

<div class="container">
  <div class="gallery">
    <div class="wrap_video_item">
      <h3>Санкт-Петербург</h3>
      <div class="video_item">
        <video src="video/piter.mp4" muted controls></video>
      </div>
    </div> <!-- END wrap_video_item -->
  </div>
</div>

This way you can add several wrapper blocks and change the links to the videos you need.

CSS styles

Now that the basic structure of the gallery is ready, we can start designing it. Open the style.css file.

First, let's set the styles for our container with the "gallery" class.

.gallery {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }

Next, we style the wrapper block and the <video> tag. We specify the width, and the height will be automatic.

 .wrap_video_item{
    width: 30%;
    height: auto;
  }
  video{
    width: 100%;
    height: auto;
  }

We set styles so that the block increases in size when hovered over.

 .video_item:hover{
    position: relative;
    transform: scale(1.5);
    z-index: 1;
    transition-duration: .5s;
    transition-timing-function: ease-out;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  }

You can also specify styles for headings.

h2 {
    text-align: center;
    font-size: 36px;
    font-weight: bold;
  }
  h3{
    text-align: center;
    font-size: 24px;
    font-weight: bold;
  }

Javascript

To make our gallery more interactive, we can write a small script. It will allow us to start the video when the cursor hovers over it and stop it when it leaves.

Add the following code to the main.js file

$(document).ready(function() {
    $("video").on("mouseover", function(event) {
      this.play();
    }).on('mouseout', function(event) {
      this.pause();
    });
  })

The gallery is ready. All that remains is to add other video files inside the HTML document.

While hand-coding gives you full control over the design and functionality, there are some downsides to this approach:

The process is time-consuming and requires careful debugging, especially with a large number of videos.
You need to have a fairly good understanding of HTML, CSS, and JavaScript.
There may be compatibility issues across browsers, which may require additional configuration.

Ready-made solutions, such as the Qform video widget, provide a convenient and quick way to place videos on your site without having to understand programming. With it, you can customize the launch parameters, display type, call-to-action button, and sending goals to the analytics system. This saves you time and simplifies the process.

Понравилась статья? Поделись!