Photo gallary component - 4
COPY
<div class="container">
<div class="row justify-content-center mt-5 text-center">
<div class="col-md-8">
<h2 class="display-5 fw-semibold">Photo Gallery</h2>
<p>Adio dignissimos ducimus qui blanditiis praesentium voluptatum
deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
provident.</p>
</div>
</div>
<div class="grid">
<figure class="effect-ruby">
<img src="/html-component/images/nature/trient-incontournables.jpg" alt="img13">
<figcaption>
<h2>Sint <span>Occaecati</span></h2>
<div class="caption">
<p>Ruby did not need any help. Everybody knew that.</p>
<a href="#">View more</a>
</div>
</figcaption>
</figure>
<figure class="effect-ruby">
<img src="/html-component/images/nature/woods-trees.jpg" alt="img14">
<figcaption>
<h2>Quas <span>Molestias</span></h2>
<div class="caption">
<p>Ruby did not need any help. Everybody knew that.</p>
<a href="#">View more</a>
</div>
</figcaption>
</figure>
<figure class="effect-ruby">
<img src="/html-component/images/nature/trient-incontournables.jpg" alt="img13">
<figcaption>
<h2>Sint <span>Occaecati</span></h2>
<div class="caption">
<p>Ruby did not need any help. Everybody knew that.</p>
<a href="#">View more</a>
</div>
</figcaption>
</figure>
<figure class="effect-ruby">
<img src="/html-component/images/nature/woods-trees.jpg" alt="img14">
<figcaption>
<h2>Quas <span>Molestias</span></h2>
<div class="caption">
<p>Ruby did not need any help. Everybody knew that.</p>
<a href="#">View more</a>
</div>
</figcaption>
</figure>
</div>
</div>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-blue: #009ce4;
--bs-blue-rgb: 0, 156, 228;
--bs-primary: var(--bs-blue);
--bs-primary-rgb: var(--bs-blue-rgb);
--bs-white-rgb: 255, 255, 255;
--bs-secondary: var(--bs-black);
}
body {
font-family: 'Inter', sans-serif;
font-size: .85rem;
}
a {
color: var(--bs-white-rgb);
text-decoration: none;
font-weight: 600;
display: block;
margin-top: 10px;
}
.grid {
position: relative;
margin: 0 auto;
padding: 1em 0 4em;
max-width: 1000px;
list-style: none;
text-align: center;
}
/* Common style */
.grid figure {
position: relative;
float: left;
overflow: hidden;
margin: 10px 1%;
min-width: 320px;
max-width: 480px;
max-height: 360px;
width: 48%;
background: #3085a3;
text-align: center;
cursor: pointer;
}
.grid figure img {
position: relative;
display: block;
min-height: 100%;
max-width: 100%;
opacity: 0.8;
}
.grid figure figcaption {
padding: 2em;
color: #fff;
text-transform: uppercase;
font-size: 1.25em;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.grid figure figcaption::before,
.grid figure figcaption::after {
pointer-events: none;
}
.grid figure figcaption,
.grid figure figcaption>a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption>a {
z-index: 1000;
text-indent: 200%;
white-space: nowrap;
font-size: 0;
opacity: 0;
}
.grid figure h2 {
word-spacing: -0.15em;
font-weight: 300;
}
.grid figure h2 span {
font-weight: 800;
}
.grid figure h2,
.grid figure p {
margin: 0;
}
.grid figure .caption {
letter-spacing: 1px;
font-size: 68.5%;
}
figure.effect-ruby {
background-color: #00b704;
}
figure.effect-ruby img {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(1.15);
transform: scale(1.15);
}
figure.effect-ruby:hover img {
opacity: 0.1;
-webkit-transform: scale(1);
transform: scale(1);
}
figure.effect-ruby h2 {
margin-top: 20%;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0);
}
figure.effect-ruby .caption {
margin: 1em 0 0;
padding: 1em;
border: 1px solid #fff;
opacity: 0;
-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 h2 {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
figure.effect-ruby:hover .caption {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
}
Photo gallary component - 3
COPY
<div class="container">
<div class="row justify-content-center mt-5 text-center">
<div class="col-md-8">
<h2 class="display-3 fw-semibold">Photo Gallery</h2>
<p>Adio dignissimos ducimus qui blanditiis praesentium voluptatum
deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
provident.</p>
</div>
</div>
<div class="grid">
<figure class="effect-bubba">
<img src="/html-component/images/nature/road-in-jangol.jpg" alt="img02">
<figcaption>
<h2>Likes <span>Appear</span></h2>
<p>Molestias excepturi sint occaecati cupiditate</p>
</figcaption>
</figure>
<figure class="effect-bubba">
<img src="/html-component/images/nature/road-in-jangol.jpg" alt="img16">
<figcaption>
<h2>Likes <span>Appear</span></h2>
<p>Molestias excepturi sint occaecati cupiditate</p>
</figcaption>
</figure>
<figure class="effect-bubba">
<img src="/html-component/images/nature/road-in-jangol.jpg" alt="img02">
<figcaption>
<h2>Likes <span>Appear</span></h2>
<p>Molestias excepturi sint occaecati cupiditate</p>
</figcaption>
</figure>
<figure class="effect-bubba">
<img src="/html-component/images/nature/road-in-jangol.jpg" alt="img16">
<figcaption>
<h2>Likes <span>Appear</span></h2>
<p>Molestias excepturi sint occaecati cupiditate</p>
</figcaption>
</figure>
</div>
</div>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-blue: #009ce4;
--bs-blue-rgb: 0, 156, 228;
--bs-primary: var(--bs-blue);
--bs-primary-rgb: var(--bs-blue-rgb);
--bs-white-rgb: 255, 255, 255;
--bs-secondary: var(--bs-black);
}
body {
font-family: 'Inter', sans-serif;
font-size: .85rem;
}
a {
color: var(--bs-white-rgb);
text-decoration: none;
font-weight: 600;
display: block;
margin-top: 10px;
}
.grid {
position: relative;
margin: 0 auto;
padding: 1em 0 4em;
max-width: 1000px;
list-style: none;
text-align: center;
}
/* Common style */
.grid figure {
position: relative;
float: left;
overflow: hidden;
margin: 10px 1%;
min-width: 320px;
max-width: 480px;
max-height: 360px;
width: 48%;
background: #3085a3;
text-align: center;
cursor: pointer;
}
.grid figure img {
position: relative;
display: block;
min-height: 100%;
max-width: 100%;
opacity: 0.8;
}
.grid figure figcaption {
padding: 2em;
color: #fff;
text-transform: uppercase;
font-size: 1.25em;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.grid figure figcaption::before,
.grid figure figcaption::after {
pointer-events: none;
}
.grid figure figcaption,
.grid figure figcaption>a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption>a {
z-index: 1000;
text-indent: 200%;
white-space: nowrap;
font-size: 0;
opacity: 0;
}
.grid figure h2 {
word-spacing: -0.15em;
font-weight: 300;
}
.grid figure h2 span {
font-weight: 800;
}
.grid figure h2,
.grid figure p {
margin: 0;
}
.grid figure p {
letter-spacing: 1px;
font-size: 68.5%;
}
figure.effect-bubba {
background: #27c400;
}
figure.effect-bubba img {
opacity: 0.7;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
figure.effect-bubba:hover img {
opacity: 0.4;
}
figure.effect-bubba figcaption::before,
figure.effect-bubba figcaption::after {
position: absolute;
top: 30px;
right: 30px;
bottom: 30px;
left: 30px;
content: '';
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
figure.effect-bubba figcaption::before {
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: scale(0, 1);
transform: scale(0, 1);
}
figure.effect-bubba figcaption::after {
border-right: 1px solid #fff;
border-left: 1px solid #fff;
-webkit-transform: scale(1, 0);
transform: scale(1, 0);
}
figure.effect-bubba h2 {
padding-top: 30%;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
figure.effect-bubba p {
padding: 20px 2.5em;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0);
}
figure.effect-bubba:hover figcaption::before,
figure.effect-bubba:hover figcaption::after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
figure.effect-bubba:hover h2,
figure.effect-bubba:hover p {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
Photo gallary component - 2
COPY
<div class="container">
<div class="row justify-content-center mt-5 mb-4 text-center">
<div class="col-md-8">
<h2 class="display-5 fw-semibold">Photo Gallery</h2>
<p>Adio dignissimos ducimus qui blanditiis praesentium voluptatum
deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
provident.</p>
</div>
</div>
<div class="row g-2">
<div class="col-md-4">
<div class="photo red">
<img src="/html-component/images/nature/south1.jpg" alt="sample33">
<div class="figcaption">
<h3 class="fs-5">Caption <span> Name</span></h3>
</div>
<a href="#"></a>
</div>
</div>
<div class="col-md-4">
<div class="photo blue">
<img src="/html-component/images/nature/woods-trees.jpg" alt="sample34">
<div class="figcaption">
<h3 class="fs-5">Caption <span> Name</span></h3>
</div>
<a href="#"></a>
</div>
</div>
<div class="col-md-4">
<div class="photo green">
<img src="/html-component/images/nature/lake-green-mountains-peaceful.jpg" alt="sample35">
<div class="figcaption">
<h3 class="fs-5">Caption <span> Name</span></h3>
</div>
<a href="#"></a>
</div>
</div>
</div>
</div>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-blue: #009ce4;
--bs-blue-rgb: 0, 156, 228;
--bs-primary: var(--bs-blue);
--bs-primary-rgb: var(--bs-blue-rgb);
--bs-white-rgb: 255, 255, 255;
--bs-secondary: var(--bs-black);
}
body {
font-family: 'Inter', sans-serif;
font-size: .85rem;
}
.photo {
position: relative;
overflow: hidden;
width: 100%;
background: #000000;
color: #ffffff;
text-align: center;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
display: inline-flex;
}
.photo * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.photo img {
max-width: 100%;
position: relative;
opacity: 0.7;
}
.photo .figcaption {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.photo h3 {
position: absolute;
left: 40px;
right: 40px;
display: inline-block;
background: #000000;
-webkit-transform: skew(-15deg) rotate(-5deg) translate(0, -50%);
transform: skew(-15deg) rotate(-5deg) translate(0, -50%);
padding: 12px 5px;
margin: 0;
top: 50%;
text-transform: uppercase;
font-weight: 400;
}
.photo h3 span {
font-weight: 800;
}
.photo:before {
height: 100%;
width: 100%;
top: 0;
left: 0;
content: '';
background: #ffffff;
position: absolute;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-webkit-transform: rotate(110deg) translateY(-50%);
transform: rotate(110deg) translateY(-50%);
}
.photo a {
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
z-index: 1;
}
.photo.blue {
background: #adadad;
}
.photo.red {
background: #adadad;
}
.photo.green {
background: #adadad;
}
.photo:hover img,
.photo.hover img {
opacity: 1;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.photo:hover h3,
.photo.hover h3 {
-webkit-transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
}
.photo:hover:before,
.photo.hover:before {
-webkit-transform: rotate(110deg) translateY(-150%);
transform: rotate(110deg) translateY(-150%);
}
Photo gallery component - 1
COPY
<div class="container">
<div class="row justify-content-center my-5 mb-2 text-center">
<div class="col-md-8 mb-4">
<h2 class="display-5 fw-semibold">Photo Gallery</h2>
<p>Vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
provident.</p>
</div>
</div>
<div class="row g-2">
<div class="col-md-3">
<div class="photo">
<img src="/html-component/images/nature/south1.jpg" alt="..">
<div class="figcaption">
<h3>Caption <span> Name</span></h3>
</div>
<a href="#"></a>
</div>
</div>
<div class="col-md-3">
<div class="photo">
<img src="/html-component/images/nature/woods-trees.jpg" alt="..">
<div class="figcaption">
<h3>Caption <span> Name</span></h3>
</div>
<a href="#"></a>
</div>
</div>
<div class="col-md-3">
<div class="photo"><img src="/html-component/images/nature/lake-green-mountains-peaceful.jpg" alt="..">
<div class="figcaption">
<h3>Caption <span> Name</span></h3>
</div>
<a href="#"></a>
</div>
</div>
<div class="col-md-3">
<div class="photo"><img src="/html-component/images/nature/cascade-pissevache.jpg" alt="..">
<div class="figcaption">
<h3>Caption <span> Name</span></h3>
</div>
<a href="#"></a>
</div>
</div>
<div class="col-md-3">
<div class="photo">
<img src="/html-component/images/nature/south1.jpg" alt="..">
<div class="figcaption">
<h3>Caption <span> Name</span></h3>
</div>
<a href="#"></a>
</div>
</div>
<div class="col-md-3">
<div class="photo"><img src="/html-component/images/nature/woods-trees.jpg" alt="..">
<div class="figcaption">
<h3>Caption <span> Name</span></h3>
</div>
<a href="#"></a>
</div>
</div>
<div class="col-md-3">
<div class="photo"><img src="/html-component/images/nature/lake-green-mountains-peaceful.jpg" alt="..">
<div class="figcaption">
<h3>Caption <span> Name</span></h3>
</div>
<a href="#"></a>
</div>
</div>
<div class="col-md-3">
<div class="photo"><img src="/html-component/images/nature/cascade-pissevache.jpg" alt="..">
<div class="figcaption">
<h3>Caption <span> Name</span></h3>
</div>
<a href="#"></a>
</div>
</div>
</div>
</div>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-blue: #009ce4;
--bs-blue-rgb: 0, 156, 228;
--bs-primary: var(--bs-blue);
--bs-primary-rgb: var(--bs-blue-rgb);
--bs-white-rgb: 255, 255, 255;
--bs-secondary: var(--bs-black);
}
body {
font-family: 'Inter', sans-serif;
font-size: .85rem;
}
.photo {
position: relative;
overflow: hidden;
background: var(--bs-primary);
color: #ffffff;
text-align: center;
display: inline-flex;
}
.photo * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.photo img {
max-width: 100%;
position: relative;
opacity: 0.8;
}
.photo .figcaption {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.photo h3 {
position: absolute;
left: 50px;
right: 50px;
display: inline-block;
background: #000000a8;
padding: 8px 5px;
margin: 0;
top: 45%;
text-transform: uppercase;
font-weight: 400;
opacity: 1.00;
font-size: 14px;
}
.photo h3 span {
font-weight: 800;
}
.photo:before {
height: 100%;
width: 100%;
top: 0;
left: 0;
content: '';
background: #ffffff;
position: absolute;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.photo a {
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
z-index: 1;
}
.photo:hover img {
opacity: 1;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.photo:hover h3 {
opacity: 0;
}
More coming soon
Regular license
- Free to use this design
- Customization by expert designer $20/hr
- For more information please get in touch with our marketing person - info@webui.io