Jump to content

Overlay and title pop-up on hover, code for 7.0

Recommended Posts

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

 

 

Link to comment
  • Replies 1
  • Views 515
  • Created
  • Last Reply

Archived

This topic is now archived and is closed to further replies.


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.