UrbanPro
true

Find the best tutors and institutes for HTML

Find Best HTML Training

Please select a Category.

Please select a Locality.

No matching category found.

No matching Locality found.

Outside India?

Search for topics

Awesome rotating Image on hover | HTML5, CSS3

Akshay Khobragade
29/12/2016 0 0

Hello everyone let's see how to make an awesome rotating image on hover with HTML 5.0 and CSS 3.0.

STEP 1: In HTML code put an image with the HTML tag

STEP 2: Style that image however you want. Below I am going to show you the CSS code for the image.

#myimg{

   width:100px; //comment - this is style the size(width property) as for our need in the website

   height:100px; //comment - same as width we are managing the height of the image as well

   transition: all 1s ease; // comment - it allows you to change the property calue smoothly (in this casse, on hover and after hover)

}

STEP 3: Now we will add the hover effect for the image. Hover effect is the effect when the user puts the mouse(not clicks) on that particular area(here image) is called HoverOver effect and when the user takes the the mouse out is called HoverOut. So lets create the hover effect for the image.

#myimg:hover{

// comment :hover type is called the pseudo field which is like specifying the effect or property on the parent field/area

transform: rotate(360deg); // comment - it will rotate the image by 360 degree. as above we have given the transition time of 1sec it will rotate 360 deg in the given time.

}

 

And that's it. Lets put the whole code without comments below.

 

<!doctype html>

 

put the head tags and include the css file reference here

 

 The description of the image

 

 

CSS file: 

#myimg{

   width:100px; 

   height:100px;

   transition: all 1s ease; 

}

#myimg:hover{

transform: rotate(360deg);

}

 

If you have any doubts in the above code please feel free to contact me through urbanpro

0 Dislike
Follow 0

Please Enter a comment

Submit

Other Lessons for You

HTMl tutorial for input type
<html> <body> <form> <input type="tel" id="phone" name="phone" pattern="{10}"required><br> <input type="submit" value="Submit"> </form> </body> </html>

Taru Sharma | 19/06/2020

0 0
0

CSS Padding
The CSS padding properties are used to generate space around an element's content, inside of any defined borders. With CSS, you have full control over the padding. There are properties for setting the...

Gagan | 02/02/2018

0 0
0

Angular-2 Developer Training Program Syllabus
Angular2 Developer Training Program Syllabus: Introduction to Angular2. Why Angular2. Angular2 Features: Components, Services and Typescript. Angular2 Components: Templates, Modules, Services...

DeCode Classes | 11/12/2017

0 0
0

Pro Developer Program Syllabus
What you will learn in Pro-Developer Program: i. Introduction to Web Technologies. ii. Introduction to .Net - Features of .Net, CTS, CLS, CLR and MSIL. iii. C# & .Net Basics - Data Types,...

DeCode Classes | 23/11/2017

1 0
0

HTML - Introduction
HTML - Hypertext Markup Language is the standard markup language for creating web applications. Hypertext is simply a piece of text that works as a link. Markup Language is a way of writing layout information...

Dibu John | 22/09/2017

1 0
0
X

Looking for HTML Classes?

Find best tutors for HTML Classes by posting a requirement.

  • Post a learning requirement
  • Get customized responses
  • Compare and select the best

Looking for HTML Classes?

Find best HTML Classes in your locality on UrbanPro

Post your learning requirement

UrbanPro.com is India's largest network of most trusted tutors and institutes. Over 55 lakh students rely on UrbanPro.com, to fulfill their learning requirements across 1,000+ categories. Using UrbanPro.com, parents, and students can compare multiple Tutors and Institutes and choose the one that best suits their requirements. More than 7.5 lakh verified Tutors and Institutes are helping millions of students every day and growing their tutoring business on UrbanPro.com. Whether you are looking for a tutor to learn mathematics, a German language trainer to brush up your German language skills or an institute to upgrade your IT skills, we have got the best selection of Tutors and Training Institutes for you. Read more