updated gallery to be more dynamic and not ugly
This commit is contained in:
Toddeh
parent
d4590e97a0
commit
52f49d5e31
2 changed files with 124 additions and 38 deletions
|
|
@ -1,31 +1,72 @@
|
|||
/* Gallery Page Styles */
|
||||
#gallery-container {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
padding: 20px;
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#image-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
grid-gap: 20px;
|
||||
body {
|
||||
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
.image-item {
|
||||
.container {
|
||||
padding: 40px 5%;
|
||||
}
|
||||
|
||||
.heading-text {
|
||||
margin-bottom: 2rem;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.heading-text span {
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.image-gallery {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.image-gallery > li {
|
||||
flex: 1 1 auto; /* or flex: auto; */
|
||||
height: 300px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.gallery-image {
|
||||
.image-gallery::after {
|
||||
content: "";
|
||||
flex-grow: 999;
|
||||
}
|
||||
|
||||
.image-gallery li img {
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.3s ease;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.image-item:hover .gallery-image {
|
||||
transform: scale(1.1);
|
||||
.overlay {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(57, 57, 57, 0.502);
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: scale(0);
|
||||
transition: all 0.2s 0.1s ease-in-out;
|
||||
color: #fff;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.image-gallery li:hover .overlay {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
|
@ -18,27 +18,72 @@
|
|||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Gallery Page -->
|
||||
<div id="gallery-container">
|
||||
<h2>Image Gallery</h2>
|
||||
<div id="image-grid">
|
||||
<div class="image-item">
|
||||
<img src="https://via.placeholder.com/300x300" alt="Placeholder Image 1" class="gallery-image">
|
||||
</div>
|
||||
<div class="image-item">
|
||||
<img src="https://via.placeholder.com/300x600" alt="Placeholder Image 2" class="gallery-image">
|
||||
</div>
|
||||
<div class="image-item">
|
||||
<img src="https://via.placeholder.com/300x200" alt="Placeholder Image 3" class="gallery-image">
|
||||
</div>
|
||||
<div class="image-item">
|
||||
<img src="https://via.placeholder.com/300x100" alt="Placeholder Image 4" class="gallery-image">
|
||||
</div>
|
||||
<!-- Add more placeholder images as needed -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<h2 class="heading-text"><span>Image</span> Gallery</h2> <ul class="image-gallery">
|
||||
<li>
|
||||
<img src="https://source.unsplash.com/VWcPlbHglYc" alt="" />
|
||||
<div class="overlay"><span>Image title</span></div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://source.unsplash.com/e6FMMambeO4" alt="" />
|
||||
<div class="overlay"><span>Image title</span></div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://source.unsplash.com/klCiPmzUw0Y" alt="" />
|
||||
<div class="overlay"><span>Image title</span></div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://source.unsplash.com/IdNOTjPeHrE" alt="" />
|
||||
<div class="overlay"><span>Image title</span></div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://source.unsplash.com/O0N9MF--hK4" alt="" />
|
||||
<div class="overlay"><span>Image title</span></div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://source.unsplash.com/FV3GConVSss" alt="" />
|
||||
<div class="overlay"><span>Image title</span></div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://source.unsplash.com/0ESjL-Nw22Y" alt="" />
|
||||
<div class="overlay"><span>Image title</span></div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://source.unsplash.com/KTVn62x6fFw" alt="" />
|
||||
<div class="overlay"><span>Image title</span></div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="https://source.unsplash.com/VSeVhmW4_JQ" alt="" />
|
||||
<div class="overlay"><span>Image title</span></div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://source.unsplash.com/07aFaTf24Kg" alt="" />
|
||||
<div class="overlay"><span>Image title</span></div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://source.unsplash.com/DqyYTM7pR2o" alt="" />
|
||||
<div class="overlay"><span>Image title</span></div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://via.placeholder.com/300x300" alt="Placeholder Image">
|
||||
<div class="overlay"><span>Image title</span></div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://via.placeholder.com/300x600" alt="Placeholder Image">
|
||||
<div class="overlay"><span>Image title</span></div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://via.placeholder.com/200x600" alt="Placeholder Image">
|
||||
<div class="overlay"><span>Image title</span></div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://via.placeholder.com/600x200" alt="Placeholder Image">
|
||||
<div class="overlay"><span>Image title</span></div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<script src="gallery.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue