javascript - Prevent image distortion with image within transformed div? -

javascript - Prevent image distortion with image within transformed div? -

i looking way adjust transform on background codepen. goal adjust placeholder images sits in it's normal position before mouseenter, still have div rotated it's diamond square. can see, have jquery animation come play well. here codepen:

http://codepen.io/pdnellius/pen/efkhl

edit: i've updated code reflect changes i've made gets effect 90% there, feels hacky.

i had utilize <img> tag instead of background image on <div> accomplish desired effect. can recommend solution center <img> while maintaining proportions when goes 100% width? utilize background image contain property accomplish effect, since i've had utilize <img> tag in order effect working, i'm unable that. i've updated codepen above reflect progress.

html

<div id="wrapper"> <div class="diamond"> <img src="http://placekitten.com/2100/2800" class="diamond-img"> </div> </div>

css

body { margin: 0; top: 0; left: 0; right: 0; } #wrapper { margin-top: 15em; } .diamond { width: 30em; height: 30em; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; transform-origin: 0 100%; background: aquamarine; margin: 0% 50%; position: absolute; overflow: hidden; } .diamond:before { content: ""; position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; z-index: -1; background: url(background.png) 0 0 repeat; -webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -o-transform: rotate(-30deg); transform: rotate(-30deg); } .diamond-img { height: 60em; -webkit-transform: rotate(45deg); -webkit-transform-origin-y: 30%; -webkit-transform-origin-x: 96%; }

js

$( document ).ready(function() { $(".diamond").on("mouseenter", function(){ console.log("entered .diamond"); $(".diamond").animate({ transform: 'rotate(0deg)', transformorigin: '0 0', margin: '0 0', width: '100%', height: '40em' }), $(".diamond-img").animate({ width: '100%', height: 'auto', transform: 'rotate(0deg)', }), $("#wrapper").animate({ margintop: '0' }) }).on("mouseleave", function(){ $(".diamond").animate({ transform: 'rotate(-45deg)', transformorigin: '0 100%', width: '30em', height: '30em', margin: '0 50%' }), $(".diamond-img").animate({ height: '60em', transform: 'rotate(45deg)', width: '45em', // transformoriginx: '30%', // transformoriginy: '96%' }), $("#wrapper").animate({ margintop: '15em' }) }); });

ok, this webpage, modify fiddle :before kludge - fiddle.

any better?

css

#wrapper { margin-top: 15em; } .diamond { position: relative; overflow: hidden; width: 30em; height: 30em; margin: 0% 50%; } .diamond:before { content: ""; position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; z-index: -1; background: url(http://www.placehold.it/2000x2000) 0 0 no-repeat; background-size: cover; background-position: center; } .diamond:hover:before { content: ""; position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; z-index: -1; background: url(http://www.placehold.it/2000x2000) 0 0 no-repeat; background-size: cover; background-position: center; transform: rotate(45deg); }

javascript jquery html css css3