Jump to content

mmeeks

Member
  • Posts

    4
  • Joined

  • Last visited

Posts posted by mmeeks

  1. 10 hours ago, creedon said:

    First remove, save a copy somewhere, any previous attempts at this effect.

    Add the following to Design > Custom CSS.

    
    /*
    
      begin page section gallery masonry hover on 'everything but'
      
      SS Version  : 7.1
      
      Version     : 0.1d0
      
      By          : Thomas Creedon < http://www.tomsWeb.consulting/ >
      
      */
      
      .gallery-masonry-item {
      
        -webkit-transition : opacity 0.25s;
        -o-transition : opacity 0.25s;
        transition : opacity 0.25s;
        
        }
        
      .gallery-masonry-wrapper:hover .gallery-masonry-item {
      
        -webkit-filter : grayscale( 1 );
        filter : grayscale( 1 );
        
        opacity : 0.5;
        
        }
        
      .gallery-masonry-wrapper:hover .gallery-masonry-item:hover {
      
        -webkit-filter : grayscale( 0 );
        filter : grayscale( 0 );
        
        opacity : 1.0;
        
        }
        
      /* end page section gallery masonry hover on 'everything but" */

    Let us know how it goes.

    This worked perfectly! Thank you so much!

  2. Site URL: http://mirandameeks.com/

    Hello,

    I'm new to CSS and I can't figure it out! I'd like to be able to present my portfolio in full color when you first visit the site, but once you hover over an image in the gallery section, the rest of the images fade to grayscale while the current hovered image maintains its color. Sort of a hover effect on everything but the hovered image, almost like a spotlight, if that makes sense.

    My old website did it and I can't remember how I added it:
    http://mirandameeks.com/


    Another example is this:
    https://codepen.io/jensgro/pen/ohdgF

     

    I currently have this custom CSS, which has the right hover effect, but it's only affecting the hovered item. I would like this effect, but opposite (i.e. affecting the other gallery images instead):

    .gallery-masonry-item 
    
    img{
      filter:grayscale(0%); 
      transition:10s;
      opacity: 1;
      transition: 1s;
    }
    
    img:hover{
      filter:grayscale(1);
      opacity: .7;
      transition: .7s;
    }

     

    It's important that the items maintain their color on their own, but only become grayscale once you hover over an image. Everything else I could find online sets the images to a grayscale filter "permanently" which I don't want.

    Thanks for your help, much appreciated!

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