Fotógalériát hogyan kell készíteni?

Sziasztok!

Szeretném a képeimet galériába rendezni és nagyítani is.

Az alapja meg is van, de nem tudom , hogy hogyan oldjam meg, hogy zoom szerűen nyíljon meg a kép és a kinagyított képet tudjam lapozni, és hozzászólásokat is lehessen hozzáírni a képek alá.

Bemásolom, ameddig eljutottam, esetleg tud valaki segíteni a nagyításban és hozzászólásban?

Köszönöm!

<section id="photo-albums" class="section">

<div class="container">

<div class="row-photo">

<div class="box-content">

<h2>Képek</h2>

<p>

<span>text-1</span>

</p>

</div>

<div id="photos">

<div class="grid">

<figure class="effect-ruby">

<img src="photo_1.jpg" alt="photo-1">

<figcaption>

<p>photo - 1</p>

</figcaption>

</figure>

</div>

<div class="grid">

<figure class="effect-ruby">

<img src="photo_2.jpg" alt="photo-2">

<figcaption>

<p>photo_2</p>

</figcaption>

</figure>

</div>

</div>

</div>

</div>

</section>

<style>

.section {

width: 1280px;

}

.container {

width: 1140px;

margin-left: 70px;

margin-right: 70px;

padding-right: 0px;

padding-left: 0px;

}

.row-photo{

width: 1110px;

margin-left: 0px;

margin-right: 0px;

padding-right: 15px;

padding-left: 15px;

}

.box-content {

width: 1110px;

display: inline-block;

margin-left: 0px;

margin-right: 0px;

padding-right: 0px;

padding-left: 0px;

}

.box-content h2 {

width: 1110px;

color: #ff9900;

text-decoration: none;

font-style: normal;

text-transform: uppercase;

font-size: 28px;

font-family: Arial, sans-serif;

}

.box-content p span {

width: 1110px;

color: #ff9900;

text-decoration: none;

font-style: normal;

font-size: 14px;

font-family: Arial, san

#photos {

width: 1110px;

line-height: 0;

-webkit-column-count: 3;

-webkit-column-gap: 0px;

-moz-column-count: 3;

-moz-column-gap: 0px;

column-count: 3;

column-gap: 0px;

}

#photos img {

width: 370px !important;

height: auto !important;

max-height: 100%;

display: block;

}

.grid {

position: relative;

margin: 0;

list-style: none;

text-align: center;

align-content: center;

justify-content: center;

display: inline-block;

}

.grid figure {

position: relative;

float: left;

overflow: hidden;

margin: 0;

width: 370px;

background: #222222;

text-align: center;

cursor: pointer;

}

.grid figure img {

height: auto;

max-width: 100%;

opacity: 0.8;

}

.grid figure figcaption {

max-width:100%;

align-items: center;

justify-content: center;

display: inline-block;

color: #fff;

text-align: center;

text-transform: uppercase;

font-size: 1.15em;

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

}

.grid figure figcaption,

.grid figure figcaption > a {

position: absolute;

align-content: center;

top: 50%;

left: 0;

width: 370px;

height: auto;

text-align: center;

}

.grid figure figcaption > a {

z-index: 1000;

text-indent: 200%;

white-space: nowrap;

font-size: 0;

opacity: 0;

}

.grid figure p {

margin: 0;

}

.grid figure p {

letter-spacing: 1px;

font-size: 50%;

}

figure.effect-ruby {

background-color: #222222;

}

figure.effect-ruby img {

opacity: 0.8;

-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;

transition: opacity 0.35s, transform 0.35s;

-webkit-transform: scale(1);

transform: scale(1);

}

figure.effect-ruby:hover img {

opacity: 0.5;

-webkit-transform: scale(1.15);

transform: scale(1.15);

}

figure.effect-ruby p {

opacity: 0;

text-align: center;

-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;

transition: opacity 0.35s, transform 0.35s;

-webkit-transform: translate3d(0,20px,0) scale(1.1);

transform: translate3d(0,20px,0) scale(1.1);

}

figure.effect-ruby:hover p {

opacity: 1;

-webkit-transform: translate3d(0,0,0) scale(1);

transform: translate3d(0,0,0) scale(1);

}

</style>