hover smooth transition css code example
Example 1: css transition opacity
/* Answer to: "css transition opacity" */
/*
CSS transitions allows you to change property values smoothly,
over a given duration.
*/
.myClass {
vertical-align: top;
transition: opacity 0.3s; /* Transition should take 0.3s */
-webkit-transition: opacity 0.3s; /* Transition should take 0.3s */
opacity: 1; /* Set opacity to 1 */
}
.myClass:hover {
opacity: 0.5; /* On hover, set opacity to 2 */
}
/*
From `opacity: 1;` to `opacity: 0.5;`, the transition time should
take 0.3 seconds as soon as the client starts to hover over the
element.
*/
Example 2: css transition on hover
/* Simple CSS color transition effect on selector */
div {
color: white;
background-color: black;
}
div:hover {
background-color: red;
}
/* Additional transition effects on selector */
div {
background-color: black;
color: white;
height: 100px;
transition: width 1.5s, height 3s;
width: 100px;
}
div:hover {
background-color: red;
height: 300px;
width: 150px;
}