Create StillImage component
This commit is contained in:
parent
6de623127c
commit
2da584b5ee
3 changed files with 29 additions and 0 deletions
BIN
app/soapbox/components/still_image.js
Normal file
BIN
app/soapbox/components/still_image.js
Normal file
Binary file not shown.
|
@ -58,6 +58,7 @@
|
|||
@import 'components/navigation-bar';
|
||||
@import 'components/promo-panel';
|
||||
@import 'components/drawer';
|
||||
@import 'components/still-image';
|
||||
@import 'components/timeline-queue-header';
|
||||
@import 'components/badge';
|
||||
@import 'components/trends';
|
||||
|
|
28
app/styles/components/still-image.scss
Normal file
28
app/styles/components/still-image.scss
Normal file
|
@ -0,0 +1,28 @@
|
|||
.still-image {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
img,
|
||||
canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
&--play-on-hover {
|
||||
img {
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&:hover img {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
&:hover canvas {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue