Transition, Tranformation, Hover CSS Text Color Change Issue

[palmerkrehel]

Hello,
I am currently designing my homepage, which can be found at http://somecoolroad.com

I am having trouble with transition and transformations with hover in CSS. I am not an expert in CSS, but am getting better as time goes on. When you hover over one of the four images on my homepage you will notice that all text in the footer changes color, which I do not want to happen. I think it has to do with the transition part of the CSS because when I delete it the text does not change.

The following is the CSS code that I have set for hovering over images on my homepage:

.hs-item .img img:hover {

      -webkit-transform: translate(0,-30px);

      -moz-transform: translate(0,-30px);

      -ms-transform: translate(0,-30px);

      -o-transform: translate(0,-30px);

      transform: translate(0,-30px);

      -webkit-transition: -webkit-transform 1s ease-out;

      -moz-transition: -moz-transform 1s ease-out;

      -o-transition: -o-transform 1s ease-out;

      transition: transform 1s ease-out;

}

Please let me know what should be changed so the text in the footer does not change. Thanks!!!

[palmerkrehel]

Hi Shikkdiel,

I think it only occurs in Safari. I checked in Firefox and it seems to work fine. This problem does not occur when I delete the following code:
-webkit-transition: -webkit-transform 1s ease-out;

My site uses HTML5. I do not know if this is causing the problem as I am not too familiar with coding. Thanks!

[Author]

Posts