HTML-CSS: Image rotate on hover

Last update on March 07 2024 13:21:41 (UTC/GMT +8 hours)

HTML-CSS : Exercise-14 with Solution

Using HTML, CSS create a rotate effect for the image on hover.

Use the scale, rotate and transition properties when hovering over the parent element (a <figure>) to animate the image.
Use overflow: hidden on the parent element to hide the excess from the image transformation.

HTML Code:

<!--License: https://bit.ly/3GjrtVF--><!-- License information -->
<!DOCTYPE html><!-- Document type declaration -->
<html><!-- Opening html tag -->
<head><!-- Opening head tag -->
<meta charset="utf-8"><!-- Character encoding -->
<meta name="viewport" content="width=device-width"><!-- Viewport meta tag -->
<title>Using HTML, CSS create a rotate effect for the image on hover</title><!-- Title of the webpage -->
</head><!-- Closing head tag -->
<body><!-- Opening body tag -->
<strong>Preview:</strong><br><!-- Preview heading -->
<figure class="hover-rotate"><!-- Figure element for image with hover rotate effect -->
<img src="https://www.w3resource.com/html-css-exercise/html-css-practical-exercises/flower-2.jpeg" height="100" width="100"/><!-- Image source with specified height and width -->
</figure><!-- Closing figure tag -->
</body><!-- Closing body tag -->
</html><!-- Closing html tag -->

Explanation:

: License information comment.
<!DOCTYPE html>: Declares the document type as HTML.
<html>: Opening tag for the HTML document.
<head>: Opening tag for the head section containing metadata.
<meta charset="utf-8">: Specifies the character encoding.
<meta name="viewport" content="width=device-width">: Configures the viewport for responsive design.
<title>Using HTML, CSS create a rotate effect for the image on hover</title>: Sets the title of the webpage.
<body>: Opening tag for the body section.
<strong>Preview:</strong><br>: Heading for the preview section.
<figure class="hover-rotate">: Defines a figure element with a class for hover rotate effect.
<img src="..." height="100" width="100"/>: Image element with source URL and specified height and width.
</figure>: Closing tag for the figure element.
</body>: Closing tag for the body section.
</html>: Closing tag for the HTML document.

CSS Code:

<style>
/* Opening style tag for CSS */

.hover-rotate {
  overflow: hidden; /* Hide overflowing content */
  margin: 8px; /* Set margin around the element */
  min-width: 240px; /* Set minimum width */
  max-width: 320px; /* Set maximum width */
  width: 100%; /* Set width to 100% */
}

.hover-rotate img {
  transition: all 0.3s; /* Apply transition effect to all properties over 0.3 seconds */
  box-sizing: border-box; /* Include border and padding in the element's total width and height */
  max-width: 100%; /* Set maximum width to 100% */
}

.hover-rotate:hover img {
  transform: scale(1.3) rotate(5deg); /* Apply scale and rotation transformation on hover */
}
/* Closing style tag */
</style>

Explanation:

.hover-rotate: Selects elements with the class "hover-rotate".
overflow: hidden;: Ensures that any overflowing content is hidden.
margin: 8px;: Sets a margin of 8 pixels around the element.
min-width: 240px;: Specifies the minimum width of the element.
max-width: 320px;: Specifies the maximum width of the element.
width: 100%;: Sets the width of the element to 100% of its container.
.hover-rotate img: Selects images within elements with the class "hover-rotate".
transition: all 0.3s;: Applies a transition effect to all properties over a duration of 0.3 seconds.
box-sizing: border-box;: Includes border and padding in the total width and height of the element.
max-width: 100%;: Sets the maximum width of the image to 100% of its container.
.hover-rotate:hover img: Selects images within elements with the class "hover-rotate" when hovered over.
transform: scale(1.3) rotate(5deg);: Applies a scale and rotation transformation to the image on hover.

HTML-CSS Editor:

See the Pen html-css-practical-exercises by w3resource (@w3resource) on CodePen.