Hi everyone,
I'm stuck at a particular problem:
No. 1
I'm working on a gallery of album covers and want to create the exact same effect as on this page: https://www.metallica.com/releases/albums/
Meaning: hovering over the image makes it greyed out (in the above example it's red) and a text with a subtitle for the release year appears. Then you can click on the gallery image and it will take you to the respective page. I have managed all of this with the below CSS coding BUT once I switch to mobile the font size gets way too big and messes up the whole look of it (see screenshots 1 & 2 attached for "correct desktop" VS "messed up mobile"-view).
Also, the greyed out image effect appears only if I put a link on the image but not if I don't link it. Is there a way to make it appear without linking the image?
Can anybody please help me this? I have no idea about CSS and feel lucky to even have managed to get to the point where I am 😉 Also, the site isn't live yet, so I unfortunately can't share any link to it.
Thanks a lot!
CSS code
figure.gallery-grid-item {
position: relative;
}
@media only screen and (min-width: 834px){
.gallery-caption {
position: static;
}
/* title */
.gallery-caption-content {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
padding: 7%;
transition: opacity ease 200ms !important;
opacity: 0 !important;
pointer-events: none;
}
.gallery-grid-item:hover .gallery-caption-content {
opacity: 1 !important;
}
/* overlay */
.gallery-grid-item-wrapper a:after {
background: #242526; /* overlay color */
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
transition: opacity ease 200ms !important;
}
.gallery-grid-item:hover .gallery-grid-item-wrapper a:after {
opacity: 0.80;
}
/* remove gap */
figcaption {
padding: 0 !important;
}
.gallery-caption-content {
font-size: 17px !important; /* caption font size */
color: white; /*caption font color */
}
p.gallery-caption-content span {
display:block;
position: absolute;
top: 53%;
font-size: 16px;
color: white;
}
}