Box shadow css transition

Give transition on box shadow

div {
  height: 200px;
  width: 200px;
  box-shadow: 0;
  transition: box-shadow 1s;
  border: 1px solid #eee;
}

div:hover {
  box-shadow: 0 0 3px #515151;
  ;
}

Box shadow css transition

/* Scale up the box */
.box:hover {
  transform: scale(1.2, 1.2);
}

/* Fade in the pseudo-element with the bigger shadow */
.box:hover::after {
  opacity: 1;
}

Source: tobiasahlin.com

Similar codes

1 vote267 views2 answers
Align div to right side of parent
CSS
1 vote277 views1 answer
Pseudo class css nth child
CSS
0 vote318 views1 answer
Css apply style to direct children
CSS
7 votes297 views6 answers
Css animation loop
CSS
0 vote298 views1 answer
Adding active Class with JavaScript
CSS
7 votes334 views3 answers
Bootstrap remove outline
CSS Bootstrap
118 votes336 views6 answers
Css @media
CSS
0 vote281 views1 answer
What is focus state in css
CSS
0 vote320 views2 answers
Popular class name layouts
CSS
0 vote287 views1 answer
Bootstarp 5
CSS