56 lines
1.1 KiB
Handlebars
56 lines
1.1 KiB
Handlebars
<h1>{{message}}</h1>
|
|
<div class="container">
|
|
<div class="gallery">
|
|
{{#each images}}
|
|
<div class="gallery-item">
|
|
<img src="{{this}}" alt="Cat Image" />
|
|
</div>
|
|
{{/each}}
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.gallery {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
width: 100%;
|
|
gap: 10px;
|
|
}
|
|
.gallery-item {
|
|
height: 300px;
|
|
flex-grow: 1;
|
|
min-width: 200px;
|
|
}
|
|
img:hover {
|
|
transform: scale(1.1);
|
|
filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
|
|
transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
}
|
|
.gallery-item img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
border-radius: 10pt;
|
|
vertical-align: bottom;
|
|
transition: 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
user-select: none;
|
|
}
|
|
img:active {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: auto;
|
|
height: auto;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
object-fit: cover;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
translate: translate(-50%, -50%);
|
|
transform: scale(1);
|
|
z-index: 1000;
|
|
inset: 0;
|
|
margin: auto;
|
|
filter: drop-shadow(0 0 40px rgba(0, 0, 0, 1));
|
|
}
|
|
</style>
|