Responsive Image Gallery Using Flexbox and CSS

Responsive Image Gallery Using Flexbox and CSS

If you want to create a Responsive Image Gallery using Flexbox and HTML CSS then this tutorial will help you. In this article, I have shown you how to Create a Simple Image Gallery using HTML and CSS. 

I used CSS to make the gallery tutorials I shared with you more responsive. But in this case, I have used Flexbox. The use of Flexbox does not require any separate CSS to make it responsive. Flexbox helps to sort any element according to the size of the device.

In this case, there are 9 images in the responsive image gallery CSS. Those images are divided into three words and three rows. Three pens can be seen in the case of the desktop. In the case of mobile, all the images can be seen in one column.

Responsive Image Gallery CSS

Below I provide a preview that will help you understand how this Responsive Image Gallery CSS works. With it, you can copy all the source code.

See the Pen Responsive image gallery with hover effect by Ground Tutorial (@groundtutorial) on CodePen.


As you can see above, there are 9 images on a webpage. There is a slight distance between each image and a white border. A hover effect is added to each image. When you mouse over or click on the images, background color, and a search icon will appear on the images.

As I mentioned above, I used Flexbox to create this image gallery. So there is no need for additional CSS in this case. You must have an idea about HTML and CSS to make it. 

Create Responsive Image Gallery Using Flexbox

If you are a beginner and want to create this kind of Responsive Image Gallery for the first time then this Flexbox Image Gallery will be best for you. Here is a very simple and straightforward code that you can easily understand. 

Along with this, I have used different types of hover effects here which have enhanced the beauty and quality a lot.

Step 1: Html code of Image Gallery

Below I have given all the HTML codes together and said the work of each line. I have used 9 images here. You can increase the size of the image to your liking.


<div class="wrapper">

<!-- 1st row -->
  <div class="image_gallery image_gallery_top">

  <div class="image_gallery_item">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhixiLZ4aWHIq2jZoJKXNzBqgko9yl7AQmQ0ybDoA2fqDm-yF2NrC_5eiYOw4jAoBj7dV5QmUkhLVE__rkbJs488GdwJlaKoFAyHEu0_zn4YEmGocRXuMdpYJeyftDwcQzBETj6oN04GtM/s0/shoe-1.jpg" alt="gallery_image">

    <div class="overlay">
  <i class="fas fa-search"></i>
    </div>
  </div>


  <div class="image_gallery_item">
       <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihLEtQzyreB45mnBDbxJ_a5JX9-rJCxoMgZfm5v_MjJMvASC4Cdb1z5PPTqO-hLQU4qwIbEodr-GyzOtFULsu9gtBsyp0rkRGK21X_7buRs0DCYqaWhZOdhBQtRIh03iVBeMHQnAt8zjM/s0/headphone-1.jpg" alt="gallery_image">

    <div class="overlay">
       <i class="fas fa-search"></i>
    </div>
  </div>


  <div class="image_gallery_item">
       <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_lXYFkkmJT770-HSYwRCBA0PQfVs9k0rmX7r3A_MFcRasNR5bclbd1fbmjgFF4CiGgTfEm6Z-K-UM_axq5By5kVclfM0vxytBM0ACS6K_Uo2p4B4OIQfljUqTqjr8DmkA5kSFbmHnUUI/s0/camera-1.jpg" alt="gallery_image">

     <div class="overlay">
  <i class="fas fa-search"></i>
     </div>
  </div>

 </div>

<!-- 2nd row -->
 <div class="image_gallery image_gallery_bottom">

  <div class="image_gallery_item">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghcpJSNjATO24hLNdpfRlF94hfa24YxG7I4U19GYfNdNP3JDzlTifLW-jk1v5kL4v-4zev4ZbhrrKJ6Df29zEO7t3At1xQxbzUv8cgsINaQiVTis_aGZGQOe-TXKgWbhGh8oeZ-ih6tYI/s0/phone-1.jpg" alt="gallery_image">

  <div class="overlay">
    <i class="fas fa-search"></i>
  </div>
  </div>


  <div class="image_gallery_item">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKa_ShPcdQFcZo7nWrmjOrm3fbQGLKD6l1KSziwHNtJxtqu_RgXJAoDQ8PNdBaMiLZNJOkO0BTz6AB9fuOCyBzZ3rzsYUI0KSuxsig_55vM8GeAR_9mB0z2LHSc5ynbZUcEW61bgSDINs/s0/camera-2.jpg" alt="gallery_image">

  <div class="overlay">
    <i class="fas fa-search"></i>
  </div>
  </div>

  <div class="image_gallery_item">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8DiCXTEL0-8iBmNg-p-VepKGFP6f0nzm-rhjL9qAEIOPoQNMkymwvIAcb3pHR5YN3bmh9ofQfpeVGJlLMEhsmPFWWG5OMSJLTK9YVgoKUB3rJImJqgU_y25Ae-QoeKpuY_lxVpJY3C5c/s0/watch-1.jpg" alt="gallery_image">

  <div class="overlay">
    <i class="fas fa-search"></i>
  </div>
  </div>

</div>

<!-- 3rd row -->
<div class="image_gallery image_gallery_bottom">

   <div class="image_gallery_item">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEFrts3Dr7VfX7zcK32GcB5KvUdn1SyvdEdr1fzo1DVs1kuZF3lOoWACfpKf9v0u1xzZNK7cm65CwW4LoUjUNo3vO2RZ5WQoGLNxGkf2DWwN0L6V4pTc49kQm98IbahEVTI1r8eS9padQ/s0/camera-3.jpg" alt="gallery_image">

  <div class="overlay">
    <i class="fas fa-search"></i>
  </div>
  </div>

  <div class="image_gallery_item">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOQgOaRxOUiOd0kWVU1clAyTJS77Z94sBIZ72hVp1bxXAP7hCPp0LJpT9bAvtfgZpq4P9DorCt2zSe23TG4EPiErAmv0ZHkVTRg-FQrMVE6TsVoiNuWXEme_zAoOLSDk3i1A6byuwcJ64/s0/watch-2.jpg" alt="gallery_image">

  <div class="overlay">
    <i class="fas fa-search"></i>
  </div>
  </div>

  <div class="image_gallery_item">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAcQPvtZTi5DYuDardQQ0Xt0svjoRYnZ0fvjDLttI0HOh8dGpfpmBcmmPKL0plUesXtAQ-OIBH1Wy2CPaCidvGniBTr7FCW8maa9Ut_cqdSJrRfJrLrToVjKc5CKCC2uZhwMdcE6cgqsA/s0/headphone-2.jpg" alt="gallery_image">

  <div class="overlay">
    <i class="fas fa-search"></i>
  </div>
  </div>

 </div>

</div>

Step 2: Basic design of the webpage

Using the following CSS codes, I designed the webpage basic and added a background color. If you use the gallery for a professional purpose, you may not use the background color.

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body{
background: #ceeef2;
}

Step 3: Design the images in the Image Gallery

The basic design of this image gallery using the below CSS and the size of the images has been determined. The image gallery's display: flex, flex-wrap: wrap is used here. 

Which converted it to Flexbox. Here a white border of width: 280px, height: 200px and 2 pixels around each image is used.

.wrapper{
width: auto;
margin: 45px 0;
}

.wrapper .image_gallery{
display: flex;
justify-content: center;
flex-wrap: wrap;
}

.wrapper .image_gallery .image_gallery_item{
width: 280px;
height: 200px;
border: 2px solid white;
cursor: pointer;
position: relative;
}

.wrapper .image_gallery .image_gallery_item img{
width: 100%;
height: 100%;
}

Step 4: Add hover effects to images

I have added the hover effect on the image using the following CSS codes and designed the icon. As I said before, when you hover the mouse over these images, you will see a background color and an icon on the image. I have used the following CSS codes for that.

.wrapper .image_gallery .image_gallery_item .overlay{
width: 100%;
height: 100%;
background: #ff7979;
position: absolute;
top: 0;
left: 0;
transform: scale(0);
transition: all 0.6s 0.1s linear;
}

.wrapper .image_gallery .image_gallery_item .overlay .fas{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
color: #ff7979;
padding: 15px;
border-radius: 50%;
}


.wrapper .image_gallery .image_gallery_item:hover .overlay{
transform: scale(0.98);
}

Hopefully, using the above codes, you can create this simple and responsive image gallery using Flexbox and CSS. I have already shared many more image gallery tutorials created by HTML and CSS.






Comments

Post a Comment

Tell me what you think ??😎

Popular posts from this blog

Splash Image Mask Using HTML and CSS (Free Code)

Image
Here you will learn how to create Splash Image Mask using HTML CSS . The CSS mask image is a kind of simple design where there will be a background color on the image.  Some parts of that background will be transparent. As a result, we get to see some of the images in the background. You can use this CSS Splash Image Mask in any background image.  Here I used HTML in Aklin which added image. Then I designed it with CSS. You can use this CSS mask background image in the background of any project. Below is a preview that will help you to know how this Splash Image Mask CSS was created. See the Pen Splash Image Mask using Html CSS by Shantanu Jana ( @shantanu-jana ) on CodePen . Here HTML and CSS are used to create this CSS mask-image property . For this, you create an HTML and CSS file.  Copy all the code given below and add it to your file. Or use the download button at the bottom of the article to download the code for this Splash Image Mask . HTML Code: The following
Read more

Simple Day Night Toggle Button Using HTML and CSS

Image
Day-Night Toggle Button is a common web element that is often found on websites. This Day Night Toggle Switch in the navigation bar helps to choose the dark and light theme of the website. Currently, the Day And Night Toggle Switch can be seen on almost all major websites starting from Facebook and Instagram. Demo Download This article will help you to know step by step how to create Day Night Toggle Button using CSS . This type of CSS Toggle Button is used to create HTML checkboxes . Here's how to easily create a Toggle Switch using the checkboxes. CSS Day Night Toggle Button Although there are many such tutorials on the Internet. But here I will tell you how to make Day Night Toggle Button and how to implement it in your project. A check box was first created using HTML input to create this button. Then that checkbox is shaped like a button by CSS. To make CSS Day Night Toggle Switch you must have some idea about HTML and CSS. This is not the first time I ha
Read more

Simple RGB Color Generator Using JavaScript & CSS

Image
In this article, you will learn how to create RGB Color Generator using JavaScript. Earlier I shared with you the project of different types of JavaScript color generators . Some projects create background colors, some gradient colors, and some generate random colors.  Using this simple RGB Color Generator you can manually generate RGB color . It is much more modern and professional than other color generators. Here you can mix different colors together and create gradients.  This JavaScript RGB Color Generator project has various control buttons. With the help of which you can create gradients by adding colors in different ways.  JavaScript RGB Color Generator Many times I use different applications or websites to create my gradient color . In that case, such a project will help you. You can get the required code of the color you have created from here. Which you can copy directly and use as CSS code. Below I have given a demo that will help you to know how this project (RGB Color
Read more