Captivating Image Rotation Effect

Introduction

In this lab, we will learn how to create a hover effect that rotates an image using CSS properties. By using scale(), rotate(), and transition, we can make the image appear to rotate when the user hovers over the parent element. We will also use overflow: hidden to hide the excess from the image transformation, creating a clean and polished effect.

This is a Guided Lab, which provides step-by-step instructions to help you learn and practice. Follow the instructions carefully to complete each step and gain hands-on experience. Historical data shows that this is a beginner level lab with a 91% completion rate. It has received a 88% positive review rate from learners.

Image Rotate on Hover

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

To create a rotate effect for an image on hover, use the scale(), rotate(), and transition properties when hovering over the parent element, which should be a <figure> element. To ensure the image transformation doesn't overflow from the parent element, add overflow: hidden to the parent element's CSS. Here's an example HTML and CSS code:

<figure class="hover-rotate">
  <img src="https://picsum.photos/id/669/600/800.jpg" />
</figure>

.hover-rotate {
  overflow: hidden;
  margin: 8px;
  min-width: 240px;
  max-width: 320px;
  width: 100%;
}

.hover-rotate img {
  transition: all 0.3s;
  box-sizing: border-box;
  max-width: 100%;
}

.hover-rotate:hover img {
  transform: scale(1.3) rotate(5deg);
}

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 Image Rotate on Hover lab. You can practice more labs in LabEx to improve your skills.