Ng-Mouseover-7

 
In thi example of Ng-Mouseover, We will show the image on mouse over of div element and on mouse leave we want to resize the image. See the code:
 
 
 
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> </head> <body ng-app=""> <div class="container"> <div class="row text-center"> <p>Mouse Over To Zoom Image</p> <div class="col-md-2"></div> <div class="col-md-8" ng-mouseover="style={'height':'450px','width':'800px'}" ng-mouseleave="style={'height':'300px','width':'500px'}"> <img class="text-center" ng-style="style" style="height:300px;width:500px" ng-hide="changeImage" src="http://learnit.visrosoftware.com/datafiles/win8(1).jpg" /> </div> <div class="col-md-2"></div> </div> </div> </body> </html>
Output