Hover Shadow Box Animation

Introduction

In this lab, we will explore various CSS concepts and techniques to enhance the visual appearance of web pages. Through hands-on exercises, we will learn how to create and modify CSS rules, apply styles to HTML elements, and use CSS selectors to target specific elements. By the end of the lab, you will have a solid understanding of how to use CSS to create visually appealing and responsive web pages.

Skills Graph

Hover Shadow Box Animation

index.html and style.css have already been provided in the VM.

To create a shadow box around the text when it is hovered, follow these steps:

1. Set transform: perspective(1px) to give the element a 3D space by affecting the distance between the Z plane and the user, and translateZ(0) to reposition the p element along the z-axis in 3D space.
2. Use box-shadow to make the box transparent.
3. Enable transitions for both box-shadow and transform by using the transition-property property.
4. Apply a new box-shadow and transform: scale(1.2) to change the scale of the text by using the :hover, :active, and :focus pseudo-class selectors.
5. Add the class hover-shadow-box-animation to the p element.

Here's the HTML code:

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

And here's the CSS code:

.hover-shadow-box-animation {
  display: inline-block;
  vertical-align: middle;
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  margin: 10px;
  transition:
    box-shadow 0.3s,
    transform 0.3s;
}

.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);
}

Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Summary

Congratulations! You have completed the Hover Shadow Box Animation lab. You can practice more labs in LabEx to improve your skills.