Jump to content

derricksrandomviews

Circle Member
  • Posts

    3,872
  • Joined

  • Last visited

  • Days Won

    8

derricksrandomviews last won the day on January 15 2023

derricksrandomviews had the most liked content!

Personal Information

Recent Profile Visitors

11,039 profile views

Single Status Update

See all updates by derricksrandomviews

  1. Hi there!

    I have been trying to find a code for 7.0 to create a hover effect for my title on my gallery block. You are the only person on the forum that I have found so far that is helping so far! I found this code you posted: 

    /*
    ** in gallery grid, set a hover over slide effect to 
    ** display slide title on partially transparent
    ** overlay
    */
    .sqs-gallery.sqs-gallery-design-grid .slide 
    .margin-wrapper .image-slide-title {
     position: absolute;
     bottom: 0;  
     width: 100%;
     height: 0;
     color: white;
     background-color: rgba(194, 194, 163, .8);
     opacity: 0;
     transition: all .25s ease-in;
    }
    .sqs-gallery.sqs-gallery-design-grid .slide 
    .margin-wrapper:hover .image-slide-title {
     height: 40%;
     opacity: .9;
    }  

    Which has worked brilliantly! The only question I have is if I wanted the title to instead fade in instead of slide up how can I alter the code above? Do you have any suggestions? 

     

    Thank you so much in advance!!! - Jacqueline

    1. derricksrandomviews

      derricksrandomviews

      I don't think the code can be simply altered. I tried changin it from a slide up to a fade but no go. Not yet anyway. 

    2. Jburtney89

      Jburtney89

      Okay, thank you so much for trying!! Much appreciated. I shall continue my search!

    3. derricksrandomviews

      derricksrandomviews

      This may work,  emphasis on may. You can post it in custom css or if you have business plan put it on a single page with the <style> command at each end. Make sure title is enable just like with the slide up code. 

      .sqs-gallery-design-grid-slide:hover {
       -webkit-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
      -moz-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
      -ms-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
       -o-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
          transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000);  
           opacity: 0;
      
           }

      If you were to use a gallery page (not block) with the same images, put that in the unlinked setction of your site, then create a summary block on a page pulling from that gallery page then there is code for that to have the title/description show up on hover.

      https://schwartz-edmisten.com/blog/title-appear-when-hovering-on-summary-block

×
×
  • 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.