CSS3 Transition Bar Only
Simple question.
When I find an element, the element should be scaled. Works fine. The problem is I have some background colors. I want to get rid of this background transition.
Below is my code.
.scale{
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.scale:hover{
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
I change the transition property to width, height, top, right, bottom, left
My pen http://codepen.io/anon/pen/yAGBj
As I mentioned in the comment above, just add background:red
to your class scale:hover
.
.scale:hover{
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
background:red;
}
DEMO
Change yours transition
to only affect the required CSS properties, not all
:
transition: transform .2s ease-in-out;
Demo version of CodePen .
Change all
to transform
:
.scale{
-webkit-transition: transform .2s ease-in-out;
-moz-transition: transform .2s ease-in-out;
-o-transition: transform .2s ease-in-out;
transition: transform .2s ease-in-out;
}