github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-14 20:40:17 -05:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #21379 from overleaf/jel-gallery-images-hover

Browse source 
[web] Clickable gallery images hover effect

GitOrigin-RevId: dfd992d970f9b0a2171bf598c27d474a06a5be74
This commit is contained in:
M Fahru 2024-10-25 07:52:47 -07:00 committed by Copybot
parent 94d14e3900
commit a3ce640c7e
2 changed files with 72 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
services/web/frontend/stylesheets/bootstrap-5/components/gallery-search.scss
View file

@ -48,12 +48,35 @@
width: 100%; width: 100%;
img { img {
@include shadow-md;
width: 185px; width: 185px;
box-shadow: 0 2px 4px 0 rgba(30 37 48 / 16%); border-radius: var(--border-radius-base);
position: relative;
@include media-breakpoint-down(sm) { @include media-breakpoint-down(sm) {
width: 35vw; width: 35vw;
} }
&::before {
content: '';
background: var(--neutral-90);
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: var(--border-radius-base);
transition: opacity 0.15s ease-in-out;
}
}
&:hover {
&::before {
opacity: 0.08;
transition: opacity 0.15s ease-in-out;
}
} }
} }
} }

52
services/web/frontend/stylesheets/bootstrap-5/pages/templates-v2.scss
View file

@ -144,19 +144,63 @@
display: inline-block; display: inline-block;
width: 100%; width: 100%;
.thumbnail,
.thumbnail-tag {
position: relative;
&::before {
content: '';
background: var(--neutral-90);
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: opacity 0.15s ease-in-out;
}
}
.thumbnail-tag {
&::before {
border-radius: var(--border-radius-medium);
}
}
.thumbnail {
&::before {
border-radius: var(--border-radius-base);
}
}
&:hover {
.thumbnail,
.thumbnail-tag {
&::before {
transition: opacity 0.15s ease-in-out;
opacity: 0.08;
}
}
}
} }
.thumbnail, .thumbnail,
.thumbnail-tag { .thumbnail-tag {
width: 100%;
margin: 0 0 var(--spacing-08) 0; margin: 0 0 var(--spacing-08) 0;
display: inline-block;
img {
width: 100%;
display: inline-block;
}
} }
.thumbnail { .thumbnail {
@include shadow-lg; img {
@include shadow-lg;
border-radius: var(--border-radius-base); border-radius: var(--border-radius-base);
}
} }
.caption { .caption {