CSS3 Animation makes everything move and blur - html

Question

For hours now i'm trying to solve a , lets say, stupid problem. I'm making this website http://hambos22.me/test_aniva/ And it's 90% ready. Well, if you go to Team (on the menu just click team) and you hover one of the faces, you gonna see that in the of transition everything in the site is moving and bluring. The horizontal rule under the Team title is changing its width and the navigation is moving. I don't know where to look. I tried changing the animation controls and again the same problem. Thank you :)
.view-first img {
transition: all 0.2s linear;
}
.view-first .mask {
opacity: 0;
background-color: rgba(175,202,11, 0.5);
transition: all 0.4s ease-in-out;
}
.view-first h2 {
transform: translateY(-100px);
opacity: 0;
transition: all 0.2s ease-in-out;
}
.view-first p {
transform: translateY(100px);
opacity: 0;
transition: all 0.2s linear;
}
.view-first span {
transform: translateY(100px);
opacity: 0;
transition: all 0.2s linear;
}
.view-first:hover img {
transform: scale(1.1);
}
.view-first:hover .mask {
opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover span {
opacity: 1;
transform: translateY(0px);
}
.view-first:hover p {
transition-delay: 0.1s;
}
.view-first:hover span {
transition-delay: 0.1s;
}

Answer 1

-webkit-transform: translateZ(0) scale(1.0, 1.0);