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.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("`CSS`")) -.-> css/BasicConceptsGroup(["`Basic Concepts`"]) css(("`CSS`")) -.-> css/CoreLayoutGroup(["`Core Layout`"]) css(("`CSS`")) -.-> css/ResponsiveandAdaptiveDesignGroup(["`Responsive and Adaptive Design`"]) css(("`CSS`")) -.-> css/DynamicStylingGroup(["`Dynamic Styling`"]) css(("`CSS`")) -.-> css/IntermediateStylingGroup(["`Intermediate Styling`"]) css/BasicConceptsGroup -.-> css/selectors("`Selectors`") css/CoreLayoutGroup -.-> css/box_model("`Box Model`") css/CoreLayoutGroup -.-> css/margin_and_padding("`Margin and Padding`") css/CoreLayoutGroup -.-> css/borders("`Borders`") css/CoreLayoutGroup -.-> css/width_and_height("`Width and Height`") css/ResponsiveandAdaptiveDesignGroup -.-> css/mobile_first_design("`Mobile First Design`") css/DynamicStylingGroup -.-> css/transitions("`Transitions`") css/DynamicStylingGroup -.-> css/transformations("`Transformations`") css/IntermediateStylingGroup -.-> css/pseudo_classes("`Pseudo-classes`") subgraph Lab Skills css/selectors -.-> lab-35217{{"`Image Rotate on Hover`"}} css/box_model -.-> lab-35217{{"`Image Rotate on Hover`"}} css/margin_and_padding -.-> lab-35217{{"`Image Rotate on Hover`"}} css/borders -.-> lab-35217{{"`Image Rotate on Hover`"}} css/width_and_height -.-> lab-35217{{"`Image Rotate on Hover`"}} css/mobile_first_design -.-> lab-35217{{"`Image Rotate on Hover`"}} css/transitions -.-> lab-35217{{"`Image Rotate on Hover`"}} css/transformations -.-> lab-35217{{"`Image Rotate on Hover`"}} css/pseudo_classes -.-> lab-35217{{"`Image Rotate on Hover`"}} end

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.

Image Rotate on Hover

Introduction

Skills Graph

Image Rotate on Hover

Summary

Other CSS Tutorials you may like