Buongiorno, io dovrei scalare una div al :hover su di essa. Il problema è che vorrei scalare la di ma vorrei far in modo che io contenuto (in questo caso un <img>) rimanga invariato (cioè non scali a sua volta).
E' possibile farlo??
Css:
Html:
Js:
E' possibile farlo??
Css:
Codice:
.boundsPartImage{background-color:whitesmoke;transparent;width:100%;}
.circle{border-radius:50%;border:1pt solid lightgrey; -webkit-transition: all .3s ease;-moz-transition: all .3s ease;
-o-transition: all .3s ease;transition: all .3s ease;}
Html:
Codice:
<div class="boundsPartImage">
<div class="circle link" style="overflow:hidden">
<img src="logo.jpg">
</div>
</div>
Js:
Codice:
$('.boundsPartImage').height(fullHeight/3);
$('.circle').height(fullHeight/3).width(fullHeight/3);
var x = $('.boundsPartImage').width() - $('.circle').width();
$('.circle').css({'margin-left':x/2});
$('.circle').hover(function(){$(this).css({'-webkit-transform':'scale(1.5,1.5)'});},
function(){$(this).css({'-webkit-transform':'scale(1,1)'});}
)