1
0
mirror of https://github.com/kremalicious/blog.git synced 2024-06-30 13:41:54 +02:00
blog/src/components/atoms/Image.module.css

54 lines
1.1 KiB
CSS
Raw Normal View History

2021-03-04 01:20:39 +01:00
.frame {
2021-11-28 17:48:05 +01:00
border: var(--stroke-width) solid rgba(255 255 255 / 20%);
2021-03-04 01:20:39 +01:00
border-radius: var(--border-radius);
overflow: hidden;
2021-03-06 01:35:05 +01:00
transition: 0.2s ease-out;
2021-03-06 03:36:13 +01:00
box-shadow: var(--box-shadow);
2021-03-04 01:20:39 +01:00
}
2021-03-22 22:26:57 +01:00
a:hover .frame,
a:focus .frame {
border-color: var(--link-color);
2021-03-06 01:35:05 +01:00
}
2021-03-04 01:20:39 +01:00
.image {
composes: frame;
2021-03-22 23:17:31 +01:00
max-width: none;
2021-03-04 01:20:39 +01:00
margin-top: calc(var(--spacer) * var(--line-height));
margin-bottom: calc(var(--spacer) * var(--line-height));
position: relative;
2021-03-22 22:26:57 +01:00
display: block;
2021-03-04 01:20:39 +01:00
}
/* single photo post teasers */
.image:only-child {
margin-top: 0;
margin-bottom: 0;
}
2021-03-22 22:26:57 +01:00
.imageTitle {
font-size: var(--font-size-h3);
font-family: var(--font-family-headings);
line-height: var(--line-height-headings);
font-weight: var(--font-weight-headings);
font-style: normal;
text-align: left;
margin: 0;
position: absolute;
top: 10%;
padding: calc(var(--spacer) / 3) var(--spacer);
background: var(--link-color);
color: #fff !important;
text-shadow: 0 1px 0 #000;
left: 0;
opacity: 0;
transform: translate3d(0, -20px, 0);
transition: 0.2s var(--easing);
2021-03-04 01:20:39 +01:00
}
2021-03-06 01:35:05 +01:00
a:hover .imageTitle,
a:focus .imageTitle {
2021-03-04 01:20:39 +01:00
opacity: 1;
transform: translate3d(0, 0, 0);
}