How to Add Image Gallery in Weebly Site?

Gallery is the collection images to showcase your portfolio and other works on your Weebly site. Weebly offers a default “Gallery” element to easily upload set of images and automatically create a beautiful gallery. In this article let us explore more on how to add image gallery in Weebly site in one of the following ways:

Individual image can be removed or added to the gallery at any point of time after publishing the site.

Using Section Element

The above method will create a gallery with plain white background. You can use “Section” element to create a full width element and add gallery inside. In this way you can add an image, color or even a video background (if you are a pro user) to your gallery images.

Instead of using gallery element, you can also use image element to create a gallery effect as shown in the below picture.

The gallery with a parallax scrolling effect on a background image will give wonderful look to your site.

Custom Weebly Gallery Widget

The last option is to create a custom gallery widget. We recommend this only if you want to use one or two gallery on your site. Below is the sample custom gallery widget for Weebly site with sliding title and description.

• 
• 
• 

• 
• 
• 

The complete CSS and HTML code is given below which you can embed using “Embed Code” element. As a good practice, paste the CSS (between style tags) under “Header Code” section of the page and embed HTML code using “Embed Code” element.

<style>
.wrapper {
width: 100%;
text-align: center;
}
.galery {
display: inline-block;;
position: relative;
width: 200px;
height: 200px;
padding: 0;
margin: 10px;
border: solid 10px #fff;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
}
.galery img {
width: 200px;
height: 200px;
}
.caption {
position: relative;
display: inline-block;
width: 200px;
height: 200px;
z-index: 10;
}
.caption::before {
content: attr(data-title);
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 0;
font-size: 24px;
background: #ffffff;
overflow: hidden;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.caption::after {
content: attr(data-description);
position: absolute;
bottom: -0;
left: 0;
width: 200px;
height: 0;
font-size: 1.1em;
font-weight: 400;
line-height: 1.4em;
color: #fff;
background: #222;
overflow: hidden;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.caption:hover::before {
height: 100px;
padding-top:10px;
}
.caption:hover::after {
bottom: 0;
height: 100px;
padding-top:10px;
}
</style> 

<ul class="wrapper">
<li class="galery">
<a class="caption" href="#" data-title="Here is a Title" data-description="Here is your short description">
<img src="https://img.webnots.com/2016/01/sample-image.jpg">
</a>
</li>
<li class="galery">
<a class="caption" href="#" data-title="Here is a Title" data-description="Here is your short description">
<img src="https://img.webnots.com/2016/01/sample-image.jpg">
</a>
</li>
<li class="galery">
<a class="caption" href="#" data-title="Here is a Title" data-description="Here is your short description">
<img src="https://img.webnots.com/2016/01/sample-image.jpg">
</a>
</li>
</ul>
<ul class="wrapper">
<li class="galery">
<a class="caption" href="#" data-title="Here is a Title" data-description="Here is your short description">
<img src="https://img.webnots.com/2016/01/sample-image.jpg">
</a>
</li>
<li class="galery">
<a class="caption" href="#" data-title="Here is a Title" data-description="Here is your short description">
<img src="https://img.webnots.com/2016/01/sample-image.jpg">
</a>
</li>
<li class="galery">
<a class="caption" href="#" data-title="Here is a Title" data-description="Here is your short description">
<img src="https://img.webnots.com/2016/01/sample-image.jpg">
</a>
</li>
</ul>

Customizing the Gallery Widget

This widget uses 3 columns and resize the images to 200px by 200px. You can change the wrapper and image sizes to adjust the columns and fit the images inside. Ensure to have 50% of the image height for the hover effect – we used 100px as the image height is 200px. Individual image can be linked to any webpage, we have used # for all “href” attributes, change # to required target URL.

Learn more on creating portfolio page using gallery element. Also if you are looking for image filtering widget then check out the article on 3 columns image filtering widget for Weebly.