Site URL: https://www.partnersincrime.co/
Hi,
I've been using this code for a slightly grey overlay and text pop-upp on hover. However, I need the text to be smaller in mobile view, because right now its cut off in the edges and you can't read the full titles. Anyone who knows what I could add for that purpose?
/* Darken summary on hover */
div#block-yui_3_17_2_1_1611589263652_6335 .slide a:after {
position: absolute;
content: "";
background: rgba(0,0,0,0.5);
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: all 0.5s;
}
div#block-yui_3_17_2_1_1611589263652_6335 .slide a {
position: relative;
}
div#block-yui_3_17_2_1_1611589263652_6335 .slide a {
position: relative;
opacity: 1 !important;
}
div#block-yui_3_17_2_1_1611589263652_6335 .slide:hover a:after {
opacity: 1;
}
a.image-slide-anchor.content-fill {
opacity: 1 !important;
}
a.image-slide-anchor.content-fill:after {
content: "";
background: rgba(0,0,0,0.5);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: all 0.5s;
}
.slide:hover a.image-slide-anchor.content-fill:after {
opacity: 1;
}
.image-slide-title {
color: white !important;
z-index: 10000;
}
.sqs-gallery-block-grid .slide .margin-wrapper:hover a.image-slide-anchor {
opacity: .4;
-webkit-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-o-transition: opacity .3s ease-in-out;
-ms-transition: opacity .3s ease-in-out;
}
.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title {
display: block;
position: absolute;
top: 0px;
right: 0;
bottom: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
padding: 0em;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
transition: all .3s ease-out;
margin-bottom: 0px !important;
pointer-events: none;
}
.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title {
color: #FFFFFF;
opacity: 0;
text-transform: uppercase;
font-size: 34px;
line-height: 125%;
letter-spacing: 3px;
margin-bottom: 240px;
}
.sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title {
color: #FFFFFF;
opacity:100;
text-transform: uppercase;
vertical-align: middle;
font-size: 34px;
line-height: 125%;
letter-spacing: 3px;
margin-bottom: 240px;
}
@media only screen and (max-width: 400px) {
.sqs-gallery-block-grid .slide .margin-wrapper:hover .image-title {
color: white;
opacity: 0;
}
}
header#header {
padding-bottom: 20px;
}
.slide a:after {
cursor: pointer;
}
Thank you,
M