Search code examples
csshovereffectsquarespace

Custom CSS With SquareSpace

I am trying to add custom CSS to my Squarespace page. When a user hovers over an image I want it to change opacity, but only if there is an URL link associated with the image. Currently, my below code is causing all images on my site to change opacity. Any help would be great!

custom CSS : .sqs-gallery-design-grid-slide:hover {opacity:.6 !important;} 

 <div class="sqs-gallery">

            <div class="slide" data-type="image">
              <div class="margin-wrapper">
                <a


                        href="/umma" 



                  class="image-slide-anchor content-fit"
                >
                  <noscript><img src="https://static1.squarespace.com/static/51eb1fb3e4b0ca0d358f4e39/58b4538be4fcb5c5e088f247/58b454483a04111160e30ab0/1488228183093/logo.png"  alt="UX Research"  /></noscript><img class="thumb-image" alt="UX Research" data-src="https://static1.squarespace.com/static/51eb1fb3e4b0ca0d358f4e39/58b4538be4fcb5c5e088f247/58b454483a04111160e30ab0/1488228183093/logo.png" data-image="https://static1.squarespace.com/static/51eb1fb3e4b0ca0d358f4e39/58b4538be4fcb5c5e088f247/58b454483a04111160e30ab0/1488228183093/logo.png" data-image-dimensions="266x125" data-image-focal-point="0.5,0.5" data-load="false" data-image-id="58b454483a04111160e30ab0" data-type="image" />
                </a>
                  <div class="image-slide-title">UX Research</div>
              </div>
            </div>

            <div class="slide" data-type="image">
              <div class="margin-wrapper">
                <a


  </div>



</div>
Solution

  • Try adding the a selector before the class name which, I'm assuming, refers to the image. Like this:

    a .sqs-gallery-design-grid-slide:hover {
    opacity: .6 !important;
}

    This will work for all images that are wrapped within a tags.

    You could go even further and limit it to only links that redirect to URLs by using the ^= attribute CSS selector. This is used to select only elements whose attribute value begins with a given string e.g. http (for links). Like this:

    a[href^=http] .sqs-gallery-design-grid-slide:hover {
    opacity: .6 !important;
}

    EDIT (to take into account editing of question):

    Use this code:

    .image-slide-anchor img:hover {
      opacity: .6 !important;
}

    EDIT 2 (to take into account asker's comment):

    OK, the working solution is to change image-slide-anchor img:hover to a.image-slide-anchor[href] img:hover.