Current Directory: /home/u930863517/domains/limraevents.com/public_html/css
Viewing File: /home/u930863517/domains/limraevents.com/public_html/css/gallery.css
/* importing variable css */
@import url("./partials/variable.css");
/* importing global css */
@import url("./partials/global.css");
/* importing navbar css */
@import url("./partials/navbar.css");
.hero{
min-height: 70vh;
background: url("../assets/backgrounds/gallary-back4.jpg") top no-repeat;
background-size: cover;
background-attachment: fixed;
position: relative;
}
.hero::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0.5;
}
.hero .content{
position: relative;
z-index: 10;
color: white;
}
.hero .content .line{
background: white !important;
}
/* SORT DIV STYLE START
============================================================================================ */
.sort-div{
box-shadow: var(--box-shadow2);
padding: 2rem 0;
margin: 3rem 0;
}
.sort-div ul{
margin: 0;
list-style: none;
}
.sort-div ul button{
padding: 0.5rem 1rem;
border: 1px solid var(--gray-color2);
color: var(--dark-color);
margin: 0 0.5rem;
border-radius: 50px;
font-size: 0.8rem;
cursor: pointer;
}
.sort-div ul button:hover,
.sort-div ul button.active{
background: var(--blue-color);
color: white;
border: 1px solid rgba(255, 255, 255, 0);
}
/* SORT DIV STYLE START
============================================================================================ */
.photo-grid{
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 1rem;
height: 100% !important;
}
.photo-grid .image-wrapper{
/* border: 1px solid var(--dark-color */
box-shadow: var(--box-shadow3);
border-radius: 0;
width: 100%;
/* height: min-content; */
height: 15rem;
position: relative;
overflow: hidden !important;
animation: top-animate 0.5s ease;
}
@keyframes top-animate{
0%{
opacity: 0;
top: 50px;
}
100%{
opacity: 1;
top: 0;
}
}
.photo-grid .image-wrapper:before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0);
transition: background 0.5s ease;
}
.photo-grid .image-wrapper .image{
height: 100%;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat;
}
.photo-grid .image-wrapper .text{
position: absolute;
bottom: -200px;
left: 0;
width: 100%;
padding: 1rem;
background-color: #262626a8;
color: white;
z-index: 100;
transition: bottom 0.5s ease;
}
.photo-grid .image-wrapper .text h5{
font-size: 16px;
margin: 0;
}
.photo-grid .image-wrapper .text p{
font-size: 12px;
text-transform: uppercase;
color: white;
font-family: var(--poppins-font);
margin: 0;
}
.photo-grid .image-wrapper:hover::before{
background: rgba(255, 255, 255, 0.5);
}
.photo-grid .image-wrapper:hover .text{
bottom: 0;
}
@media only screen and (max-width: 768px) {
.photo-grid{
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 1rem;
height: 100% !important;
}
.photo-grid .image-wrapper{
height: 12rem;
}
.main-div{
padding: 50px 0;
}
}
@media only screen and (max-width: 600px) {
.photo-grid{
display: grid;
grid-template-columns: auto auto;
grid-gap: 0.5rem;
height: 100% !important;
}
.main-div{
padding: 20px 0 !important;
}
}