CSS transform (translate) not working

[kingsadie]

I’m probably missing something simple. I want my arrow to shift to the right upon hover of one of its parent elements using transform but it won’t seem to work for me. Here’s the code. When the sectionHalf element is hovered over I want the arrow in `→` to move to the right:

a.sectionHalf:hover i {
    display: inline-block;
    font-style: normal;
    transform: translate(-3px, 0px);
-webkit-transform: translate(-3px, 0px);
-moz-transform: translate(-3px, 0px);
-o-transform: translate(-3px, 0px);
    transition: transform 0.2s ease 0s, opacity 0.2s ease 0s;
}

a.sectionHalf:hover i {
  transform: translate(3px, 0px);
-webkit-transform: translate(3px, 0px);
-moz-transform: translate(3px, 0px);
-o-transform: translate(3px, 0px);
    transition: transform 0.2s ease 0s, opacity 0.2s ease 0s;
}

[TheDoc]

Both of your selectors have `:hover` on them, so whatever is in the 2nd block will overwrite what is in the first.

Also, make sure to put the non-prefixed version last (you have `transform:` listed first).

Codepen: http://codepen.io/ggilmore/pen/d61a53b759c2e9626a85dd9600342934

(note: I have prefix-free turned on so I don’t have to write out all of the prefixes)

[kingsadie]

That did it. Thank you!

[Author]

Posts