Wie Bild größer mit der Maus über die Verwendung von Angular.js

Question

machen Ich brauche eine Hilfe. Ich muss das Bild vergrößern/verkleinern, während die Maus auf dieses bestimmte Bild zeigt. Ich erläutere meinen Code unten.

<div ng-repeat="mul in mulImage"> 
    <div class="input-group bmargindiv1 col-md-12"> 
    <span class="input-group-addon ndrftextwidth text-right" style="width:180px">Image{{$index+1}}:</span> 

     <input type="file" class="filestyle form-control" data-size="lg" name="upload_{{$index}}" id="bannerimage_{{$index}}" ng-model="mul.image" ngf-pattern="'image/*'" accept="image/*" ngf-max-size="2MB" ngf-select="onFileSelect1($index);"> 


     <span class="input-group-btn" ng-show="mulImage.length>0"> 
      <img ngf-thumbnail="mul.image" name="pro" border="0" style="width:32px; height:32px; border:#808080 1px solid;" ng-if="mul.image !=null"><img ng-src="upload/{{mul.filename}}" name="pro" border="0" style="width:32px; height:32px; border:#808080 1px solid;" ng-if="mul.filename!=''"> 
        <input type="button" class="btn btn-success" name="plus" id="plus" value="+" ng-click="addNewImageRow(mulImage);" ng-show="$last"> <input type="button" class="btn btn-danger" name="minus" id="minus" value="-" ng-show="mulImage.length>1" ng-click="deleteNewImageRow(mulImage,$index);"> 

     </span> 
     </div> 
     </div> 

Hier bin ich die Auswahl der mehrere Bilder durch neue Dateifeld zu schaffen + button.My Steuerungsseite Code unten angegeben.

$scope.mulImage=[]; 
    $scope.mulImage.push({'image':null,'filename':''}); 
    console.log('mulimage',$scope.mulImage); 
    $scope.addNewImageRow=function(mulImage){ 
     console.log('total image',mulImage.length); 
     mulImage.push({'image':null,'filename':''}); 
     console.log('end total image',mulImage.length); 

    } 
    $scope.deleteNewImageRow=function(mulImage,index){ 
     mulImage.splice(index,1); 
     console.log('file',$scope.mulImage); 
    } 
    $scope.onFileSelect1 = function(index) { 
     $scope.mulImage[index]['filename']=''; 

    } 

Hier muss ich nach der Bild aus Laufwerk auswählen, während Benutzer die Maus schweben auf diesem Bild wird das Bild größer wurde und Benutzer die Maus wieder aus dem Bild seine ursprüngliche position.Here kommt heraus ist mein plunkr working code .Please hilf mir, dieses Problem zu lösen.

Answer 1

können Sie verwenden CSS den Hover-Effekt zu tun -Transformation: Skala (1.1):

.input-group-btn:hover img { 
    -moz-transform: scale(1.1); 
    -webkit-transform: scale(1.1); 
    transform: scale(1.1); 
} 

Answer 2

Versuchen Sie, diese code-

.image { 
width:250px; 
height:250px; 
margin-right:10px; 
float:left; 
overflow:hidden; 
cursor:pointer; 
} 

.image > img { 
-webkit-transition:all 500ms linear; 
-moz-transition:all 500ms linear; 
-o-transition:all 500ms linear; 
-ms-transition:all 500ms linear; 
transition:all 500ms linear; 
} 

.image > img:hover { 
-moz-transform: scale(1.5); 
-webkit-transform: scale(1.5); 
-o-transform: scale(1.5); 
transform: scale(1.5); 
} 

Siehe diese Link- http://fiddle.jshell.net/Talsja/f6awjwty/