Zoom In/ zoom out on image using css
In this article, we have design zoom in and zoom out
on Image using CSS.
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></title>
<style>
img:hover
{
-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;
zoom:
125%;
}
</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>
Out-Put:-
For more :-
Zoom In/ zoom out on image using css
Reviewed by NEERAJ SRIVASTAVA
on
6:51:00 PM
Rating:
Reviewed by NEERAJ SRIVASTAVA
on
6:51:00 PM
Rating:
No comments: