image styling
This commit is contained in:
parent
232da2be65
commit
a891f1087a
3 changed files with 27 additions and 5 deletions
|
|
@ -1,12 +1,19 @@
|
|||
#portfolio-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
grid-auto-flow: dense;
|
||||
gap: 0.5rem;
|
||||
gap: 1.5rem;
|
||||
|
||||
& > * {
|
||||
overflow: hidden;
|
||||
border-radius: var(--small-border-radius);
|
||||
border-radius: var(--border-radius);
|
||||
transition: transform 0.3s, box-shadow 0.3s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
& > *:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
& img {
|
||||
|
|
@ -14,6 +21,11 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.5s;
|
||||
}
|
||||
|
||||
& > *:hover img {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
|
||||
& > :nth-child(7n) {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,9 @@ templ Portfolio(images []string) {
|
|||
<section>
|
||||
<div id="portfolio-grid">
|
||||
for _, img := range images {
|
||||
@AvifImage("portfolio/"+img, "portfolio")
|
||||
<div>
|
||||
@AvifImage("portfolio/"+img, "portfolio")
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -54,12 +54,20 @@ func Portfolio(images []string) templ.Component {
|
|||
return templ_7745c5c3_Err
|
||||
}
|
||||
for _, img := range images {
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<div>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = AvifImage("portfolio/"+img, "portfolio").Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "</div>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
}
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "</div></section></main>")
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "</div></section></main>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue