Created
September 4, 2023 19:52
-
-
Save hkkcngz/4042f82d3c34e068af01a892d996f62f to your computer and use it in GitHub Desktop.
3 Column Flex Image Gallery With Lightbox
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="container-all read-more-wrap mx-1"> | |
<div class="containered ${clssName}"> | |
<a class="example-image-link" href="${image}" data-lightbox="${title}" data-title="${bigTitle}"> | |
<img src="${image}" loading="lazy" alt="${bigDesc}"> | |
</a> | |
<span class="title">${bigTitle}</span> | |
<span class="text">${bigDesc}</span> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.container-all{ | |
width: fit-content; | |
margin: 20px auto; | |
height: auto; | |
overflow: auto; | |
} | |
.containered{ | |
width: calc(33% - 6px); | |
overflow:hidden; | |
height: fit-content; | |
margin:3px; | |
padding: 0; | |
display:block; | |
position:relative; | |
float:left; | |
} | |
.containered img{ | |
height: 400px; | |
width: 100%; | |
object-fit: cover; | |
transition-duration: .3s; | |
max-width: 100%; | |
display:block; | |
overflow:hidden; | |
cursor:pointer; | |
} | |
.containered .title{ | |
position:absolute; | |
display:block; | |
cursor:pointer; | |
top: 35%; | |
display: none; | |
left: 50%; | |
width: 100%; | |
text-align: center; | |
transform: translate(-50%, -50%); | |
font-weight: bold; | |
font-size: 1.6em; | |
text-shadow: 1px 5px 10px black; | |
transition-duration: .3s; | |
} | |
.containered .text{ | |
position:absolute; | |
top: 70%; | |
cursor:pointer; | |
max-width: 80%; | |
text-align:center; | |
left: 50%; | |
text-shadow: 1px 5px 10px black; | |
font-size: 1em; | |
display:none; | |
margin-right: -50%; | |
transition-duration: .3s; | |
transform: translate(-50%, -50%) | |
} | |
.containered:hover img{ | |
transform: scale(1.2); | |
transition-duration: .3s; | |
filter: grayscale(50%); | |
opacity: .7; | |
} | |
.containered:hover span{ | |
color:white; | |
display: block; | |
transition-duration: .3s; | |
} | |
@media only screen and (max-width: 900px) { | |
.containered { | |
width: calc(50% - 6px); | |
} | |
} | |
@media only screen and (max-width: 400px) { | |
.containered { | |
width: 100%; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment