Wie in Prozent

Question

div auf schweben vergrößern Ich möchte, dass der Zoom-in innerhalb des div nur das img bewirken und wird nicht alle div Maßstab

hier die Größe ist die Geige Link: http://jsfiddle.net/4tHWg/1/

Beispielcode:

.box { 
    float: left; 
    position: relative; 
    width: 14.285714286%; 



} 

.boxInner img { 
    width: 100%; 
    display: block; 
    -webkit-filter: grayscale(00%); 
    -moz-filter: grayscale(00%); 
    -o-filter: grayscale(00%); 
    -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    -o-transition: all 1s ease; 
    -ms-transition: all 1s ease; 
     transition: all 1s ease; 

} 

.boxInner img:hover { 
    width: 200%; 
} 

Answer 1

Sie CSS verwenden können, verwandelt:

http://jsfiddle.net/4tHWg/3/

.boxInner img:hover {  
    -webkit-transform: scale(1.4); 
    -moz-transform: scale(1.4); 
    -ms-transform: scale(1.4); 
    -o-transform: scale(1.4); 
    transform: scale(1.4);  
} 

1.4 entspricht das 1,4-fache seiner ursprünglichen Größe.

Answer 2

Hinzufügen auf Hugos Antwort, sollten Sie dies auf Ihr übergeordnetes Element hinzuzufügen.

.boxInner { 
    overflow: hidden; 
} 

.boxInner img:hover {  
    -webkit-transform: scale(1.4); 
    -moz-transform: scale(1.4); 
    -ms-transform: scale(1.4); 
    -o-transform: scale(1.4); 
    transform: scale(1.4);  
} 

Auf diese Weise wird das div nicht zusammen mit dem Kind Bild Größe ändern.