Scale And Spin Image On Image Hover Using CSS
In this article, we have learn that how to spin
image on mouse hover using CSS. Many times we want to those extra activities
with hover of image.
Source Code:-
<%@
Page Language="C#" AutoEventWireup="true" CodeFile="imagesstyle.aspx.cs" Inherits="imagesstyle"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>spin image
on mouse hover </title>
<style>
img
{
-webkit-transition:
all 1s ease-in-out;
-moz-transition:
all 1s ease-in-out;
-o-transition:
all 1s ease-in-out;
transition:
all 1s ease-in-out;
}
img:hover
{
-webkit-transform:
scale(1.2) rotate(1080deg);
-moz-transform:
scale(1.2) rotate(1080deg);
-o-transform:
scale(1.2) rotate(1080deg);
-ms-transform:
scale(1.2) rotate(1080deg);
transform:
scale(1.2) rotate(1080deg);
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrgXUhVsxL0PfC0Y-hMBPz3E3FNUV8VHkYa2_DzyigUoTEyQVJJJLh97_aMi3Evm1dbhyphenhyphenaJIwOCV3FZYu0Dicx2cWr43-Eq429OhDqcwH3lhENfuhJWfYXDmnUcq4Ytg-dg3JqkJOl3gk/s1600/neeraj+srivastava.jpg"
/>
</div>
</form>
</body>
</html>
For more:-textbox with rounded corner , Search image in Textbox ,Menu Bar with CSSExpand/ Collapse the single div. ,Call JavaScript function on page load in asp.net c# , Close pop up div after specify time using jquery
Scale And Spin Image On Image Hover Using CSS
![Scale And Spin Image On Image Hover Using CSS]()
Reviewed by NEERAJ SRIVASTAVA
on
4:20:00 PM
Rating:
No comments: