Stop IARC logo from "animating" on front page in Chrome

[cstephen]

If you hover over one of the four big icons on the front page (e.g., "Access Data") in Chrome, the land border in the IARC logo fades in. Whatever CSS is being applied to the four big icons on mouse hover is affecting some of the elements in the *.svg logo.

[cstephen]

Moving on to other things, but so far my findings are this:

Inside _snap_home.scss, under the following selectors:

.col-md-3.data,
.col-md-3.collab,
.col-md-3.planning-expertise,
.col-md-3.tools 

We have the following under an img selector:

&:hover, &:focus {
  -webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
  -moz-transform:scale(1.1); /*Mozilla scale version*/
   -o-transform:scale(1.1); /*Opera scale version*/
  transform:scale(1.1);
  box-shadow:0px 0px 35px #000; /*CSS3 shadow: 40px blurred shadow all around image*/
  -webkit-box-shadow:0px 0px 35px #000; /*Safari shadow version*/
  -moz-box-shadow:0px 0px 35px #000; /*Mozilla shadow version*/
  box-shadow:0px 0px 35px #000;
  opacity: 1;
 }

If you remove the following two lines (you have to remove BOTH), the problem goes away but obviously breaks the intended effect on the larger icons at the same time:

-webkit-transform:scale(1.1);
transform:scale(1.1);

It doesn't look like the aforementioned SASS selectors are even targeting the IARC logo, so this is a bit of a mystery.

[carolynrosner]

I suspect that if we get rid of all of those hover transforms (shadow, scaling) and swap that for just having the icons turn green on hover, the IARC logo issue will go away as well. But having the icon color change will mean some CSS tweaking to use background images instead of our current setup of an image placed within the <div> (like how it was set up in the old layout, when the photos turned color on hover).