Create Image Gallery with CSS

First Create an Html page and insert images in separate Div tags.
Simply copy the following code:

<div class="img"><a><img class="aligncenter size-full wp-image-123" src="https://attariwebsol.files.wordpress.com/2015/04/thumb.jpg" alt="" width="110" height="90" /></a></div>
<div class="desc">Add a description of the image here</div>
<div class="img"><a><img class="aligncenter size-medium wp-image-122" src="https://attariwebsol.files.wordpress.com/2015/04/thumb-6.jpg?w=110" alt="" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img"><a><img class="aligncenter size-medium wp-image-121" src="https://attariwebsol.files.wordpress.com/2015/04/thumb-5.jpg?w=110" alt="" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img"><a href="#"><img class="aligncenter size-medium wp-image-120" src="https://attariwebsol.files.wordpress.com/2015/04/thumb-4.jpg?w=110" alt="" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img"><a><img class="aligncenter size-medium wp-image-119" src="https://attariwebsol.files.wordpress.com/2015/04/thumb-3.jpg?w=110" alt="" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img"><a><img class="aligncenter size-medium wp-image-118" src="https://attariwebsol.files.wordpress.com/2015/04/thumb-2.jpg?w=110" alt="" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img"><a><img class="aligncenter size-full wp-image-117" src="https://attariwebsol.files.wordpress.com/2015/04/thumb-1.jpg" alt="" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img"><a><img class="aligncenter size-medium wp-image-116" src="https://attariwebsol.files.wordpress.com/2015/04/sports_cars_differences-y8.jpg?w=110" alt="" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img"><a href="#"><img class="aligncenter size-medium wp-image-115" src="https://attariwebsol.files.wordpress.com/2015/04/d7fuj28l_1_autoshow_xylo.jpg?w=110" alt="" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img"><a href="#"><img class="aligncenter size-full wp-image-114" src="https://attariwebsol.files.wordpress.com/2015/04/9781429653169.jpg" alt="" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div>
</div>

After Pasting th above Html change the links of images according to your gallery and the insert the following CSS:

<style>
div.img {
margin: 5px;
padding: 5px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;
}

div.img img {
display: inline;
margin: 5px;
border: 1px solid #ffffff;
}

div.img a:hover img {
border: 1px solid #0000ff;
}

div.desc {
text-align: center;
font-weight: normal;
width: 120px;
margin: 5px;
}
</style>