CSS not applying to first image in row

[BSFC]

Hoping you can help. I have a grayscale on hover applied to the images on the page in secure notes. The same CSS is applied for each image and works perfectly, but is not being applied to the first image in the first row.

If I duplicate the row, it works fine on the second row. If i duplicate the image itself, it works fine in the second position. I can’t seem to find the issue.

Here’s the code. I ran it through the CSS Lint as well.

$el img {
   filter: grayscale(100%);
  -webkit-transition: all .5s ease-in-out;  
  -moz-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
}


img:hover {
   -webkit-filter: none;
   -moz-filter: none;
   -ms-filter: none;
   filter: none;
}

[marc_a]

Hi @BSFC,

Thanks for reaching out.

I suggest that you add a class name in your row, for example, you add a class name profile, then use the CSS code below.

.profile img {
 // your css code
}

Currently, when I check your website you individually added the CSS code to the profile image, what if you have plenty of profile to add in the future, the code above will save you so much time to fix your issue.

Hope that helps.

Thank you.

[BSFC]

Tried that, now the grayscale isn’t showing live, but i can see it working in the editing window.

This is how the code looks now:
.profile img {
filter: grayscale(100%);
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
}
.profile img:hover {
-webkit-filter: none;
-moz-filter: none;
-ms-filter: none;
filter: none;
}

[friech]

Hi @BSFC,

That CSS code should work. However, it seems you added a calendly HTML code and JS code inside the Theme Options > CSS.

Please remove that, Theme Options > CSS is only for CSS, and review the calendly documentation on how to integrate it in a WordPress site.

Use the http://csslint.net again to check all the custom CSS on your Theme Options > CSS and address all found errors.

Hope it helps,
Cheers!