0

I am a bit new to CSS but am creating a website on Squarespace and am having trouble overriding the parent class. Basically, I have been trying to make it so that all images in the grid are dark, and when you hover over them they light up along with the text. The problem is, the text from h2 and h3 always seem to be overridden by the opacity of the .wrapper.

Currently the source code looks something like this:

 <div class="item">
  <a href="/news/" data-dynamic-load data-dynamic-receiver="#detail_540e1c21e4b00b3e087650b7"   >
    <div class="wrapper">
      <div class="project-title">
        <h2>NEWS</h2>
        <h3>&mdash; view &mdash;</h3>
      </div>
    </div>
  </div>

I have tried a few ways, between displaying and using opacity. Something like:

#grid .item {
  .wrapper {
    opacity: 1;
    .project-title h2,h3 {
      display:none; 
    }
  }

  &.hovering .wrapper {
    opacity: 0;
    .project-title h2,h3 {
      display:block !important;}
      }
}

Any advice in fixing this issue?

zkhoffmann
  • 3
  • 1
  • 3
  • We need clarification. What part of this is not working for you? What opacity is over-riding? – DA. Sep 09 '14 at 19:15
  • 1
    possible duplicate of [Resetting the opacity of a child elements - Maple Browser (Samsung TV App)](http://stackoverflow.com/questions/13508877/resetting-the-opacity-of-a-child-elements-maple-browser-samsung-tv-app) – Marc B Sep 09 '14 at 19:15
  • .project-title h2,h3 {display:block !important;}} Seems to be the problem. h2,h3 will not display again, after being hidden in the first portion. – zkhoffmann Sep 09 '14 at 19:25
  • Thanks for the reference. I took a look at it and tried what it recommended, using the opacity from the color function instead of opacity itself. But color seems to apply only to a single image at a time, instead of the ones in the grid like opacity does. – zkhoffmann Sep 09 '14 at 20:14
  • Hi there! I can tell right away that you have the wrong object selected. This is not an H2 or H3 situation. Those are text headers. This is going to be an image item. But when you ask a question about Squarespace in here you have to state which template you are using because they are all structured differently. Please edit your post and include the template and Squarespace version (Assuming that it is version 6 since you said that you were new). – Thesis Sep 10 '14 at 10:17
  • Ok thanks. I actually did figure it out and will use the format you suggested in future posts :) – zkhoffmann Sep 11 '14 at 20:44

1 Answers1

0

I believe this is what you are looking for. You can put this into the Custom CSS are under Design. Any image that is a link will appear black and white until hovering. Hovering will bring them full color.

Target Slideshow - Should work with Gallery

 #slideshow .slide img {
      -webkit-filter: grayscale(1);
      -webkit-filter: grayscale(100%);
      filter: grayscale(100%);
    }
    #slideshow .slide img:hover {
      -webkit-filter: grayscale(0);
      -webkit-filter: grayscale(0%);
      filter: grayscale(0%);
    }

Targeting Linked Images Only

a:link img {
    -webkit-filter: grayscale(1);
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

    a:hover img {
         -webkit-filter: grayscale(0);
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
}
chrisdholt
  • 1
  • 2