1
0
Fork 0
blog/src/components/Post/PostImage.module.scss

45 lines
833 B
SCSS

@import 'variables';
@import 'mixins';
.postImageTitle {
transition: 0.1s ease-out;
font-size: $font-size-h3;
font-family: $font-family-headings;
line-height: $line-height-headings;
font-weight: $font-weight-headings;
font-style: normal;
text-align: left;
letter-spacing: -0.02em;
margin: 0;
position: absolute;
top: 10%;
padding: $spacer / 3 $spacer;
background: rgba($link-color, 0.85);
color: #fff;
text-shadow: 0 1px 0 #000;
left: 0;
opacity: 0;
transform: translate3d(0, -20px, 0);
}
.postImage {
@include breakoutviewport();
max-width: none;
display: block;
margin-top: $spacer * 1.5;
margin-bottom: $spacer * 1.5;
a & {
position: relative;
display: block;
}
a:hover & {
.postImageTitle {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
}