hero image cover hidden on hover

This commit is contained in:
isUnknown 2024-09-20 14:57:29 +02:00
parent 67fefa1125
commit b1bf757aa4
5 changed files with 50 additions and 6 deletions

View file

@ -56,6 +56,17 @@
z-index: 3;
}
.hero__image {
position: relative;
}
.hero__image a {
position: absolute;
display: block;
inset: 0;
z-index: 3;
}
@media screen and (max-width: 800px) {
.events-grid {
--padding-vertical: 10vw;

View file

@ -55,6 +55,10 @@
margin-right: 2rem;
}
.hero .image-wrapper {
height: 100%;
}
.hero__image {
height: calc(100vh - var(--empty-space) - 2 * var(--padding-vertical));
}
@ -66,6 +70,10 @@
object-fit: cover;
}
.hero__image:hover .image-cover {
opacity: 0;
}
@media screen and (max-width: 800px) {
.hero__text h2 {
text-align: center;

19
assets/dist/style.css vendored
View file

@ -828,6 +828,10 @@ button:focus-visible {
margin-right: 2rem;
}
.hero .image-wrapper {
height: 100%;
}
.hero__image {
height: calc(100vh - var(--empty-space) - 2 * var(--padding-vertical));
}
@ -839,6 +843,10 @@ button:focus-visible {
object-fit: cover;
}
.hero__image:hover .image-cover {
opacity: 0;
}
@media screen and (max-width: 800px) {
.hero__text h2 {
text-align: center;
@ -1161,6 +1169,17 @@ a.to-blank:hover > .ticket svg path.dot {
z-index: 3;
}
.hero__image {
position: relative;
}
.hero__image a {
position: absolute;
display: block;
inset: 0;
z-index: 3;
}
@media screen and (max-width: 800px) {
.events-grid {
--padding-vertical: 10vw;