Jump to content

Mobile

Recommended Posts

Site URL: https://www.imlouisechantal.com/photos2

Hi Everyone,

I'm very new at CSS and was hoping for some guidance. I've set up my gallery with a text hover over to display 2 photo sets. For the mobile view, I understand that a hover gesture isn't possible, but is there another way that I can display the title? The gallery is set up as a grid with title showing. Thanks in advance! I appreciate the help.

Below is the code that I used:

body.collection-type-index .color-weight-dark #logo img { -webkit-filter: invert(100%); filter: invert(100%); }

.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title {
font-family: omnes-semicond;
font-size: 40px;
font-weight: 300;
color: #000000;
}
.sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title {
font-family: omnes-semicond;
font-size: 40px;
font-weight: 300;
color: #000000;
}
@media only screen and (max-width: 1024px) {
.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title { opacity: 50; }
}
.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; background-color: rgba(255,255,255,0); z-index: 9999; top: 40%; margin-bottom: 0%; opacity: 0; -webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out; } .sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title { opacity: 1; }


.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title {
 color: #ffffff; 
 opacity: 0;  
 font-size: 50px; 
 line-height: 100%;
 letter-spacing: 0px; 
 margin-bottom: 0px;
}

.sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title {
 color: #ffffff; 
 opacity: 100;  
 vertical-align: middle; 
 font-size: 50px; 
 weight: 100;
 line-height: 100%;
 letter-spacing: 0px; 
 margin-bottom: 0px;
}

@media only screen and (max-width: 1024px) {
.sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title { 
color: transparent; 
opacity: 0;
}
}
@media screen and (max-width:767px) {
[data-section-id="5eca911272e6a72aacf7a277"] figcaption.image-caption-wrapper {
    opacity: 1 !important;
    visibility: visible !important;
  overflow: hidden;}
}

Link to comment
  • Replies 6
  • 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.