andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
e82fcf0a9d8541b9bffbc8f59af0eb3350530e6a
30-seconds-of-code/snippets/hover-shadow-box-animation.md
30secondsofcode e82fcf0a9d Travis build: 126 [FORCED]
2019-01-12 10:31:27 +00:00

2.1 KiB
Raw Blame History

Hover Shadow Box Animation

Creates a shadow box around the text whern it is hovered.

HTML

<p class="hover-shadow-box-animation">Box it!</p>

CSS

.hover-shadow-box-animation {
  display: inline-block;
  vertical-align: middle;
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  margin: 10px;
  transition-duration: 0.3s;
  transition-property: box-shadow, transform;
}
.hover-shadow-box-animation:hover,
.hover-shadow-box-animation:focus,
.hover-shadow-box-animation:active {
  box-shadow: 1px 10px 10px -10px rgba(0, 0, 24, 0.5);
  transform: scale(1.2);
}

Demo

Box it!

<style> .snippet-demo_hover-shadow-box-animation{ display: inline-block; color: #0087ca; margin: 10px; vertical-align: middle; transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; transition-duration: 0.3s; transition-property: box-shadow, transform; } .snippet-demo_hover-shadow-box-animation:hover, .snippet-demo_hover-shadow-box-animation:focus, .snippet-demo_hover-shadow-box-animation:active{ box-shadow: 1px 10px 10px -10px rgba(0,0,24,0.1); transform: scale(1.2); } </style>

Explanation

  1. display: inline-block to set width and length for p element thus making it an inline-block.
  2. Set transform: perspective(1px) to give element a 3D space by affecting the distance between the Z plane and the user and translate(0) to reposition the p element along z-axis in 3D space.
  3. box-shadow: to set up the box.
  4. transparent to make box transparent.
  5. transition-property to enable transitions for both box-shadow and transform.
  6. :hover to activate whole css when hovering is done until active.
  7. transform: scale(1.2) to change the scale, magnifying the text.

Browser Support

✅ No caveats.