html - magnify an area on an image when mouse hovers in bigcartel -

i in no shape or form coder, have made tweaks bigcartel site expected come out in next few weeks. have clothing line, , wanted enable consumers have selected product, able hover on image of product view magnified... (here example nike of mean: http://store.nike.com/us/en_us/pd/breathe-womens-short-sleeve-running-top/pid-11319700/pgid-11619220 ) wanted know code use make image/product consumer has clicked on , viewing larger/magnify when hovering on area... saw codes uploaded, since not professional coder, wondering insert in custom coding . have css option, , html , don't know if should go "products" or on coding...(sorry rookie question)...

i want know (if can slide question in there well) how speed speed of slide show on bigcartel site, , possibly change dissolve option... and, again, insert code..

i've made minor changes on own, again, no coder , there few additional tweaks, love make not make site "cookie cutter" folks @ bigcartel, sent me link search , ask questions on. in advance help!

have tried this works me https://codepen.io/ccrch/pen/yyaraz

js

$('.tile')     // tile mouse actions     .on('mouseover', function(){       $(this).children('.photo').css({'transform': 'scale('+ $(this).attr('data-scale') +')'});     })     .on('mouseout', function(){       $(this).children('.photo').css({'transform': 'scale(1)'});     })     .on('mousemove', function(e){       $(this).children('.photo').css({'transform-origin': ((e.pagex - $(this).offset().left) / $(this).width()) * 100 + '% ' + ((e.pagey - $(this).offset().top) / $(this).height()) * 100 +'%'});     })     // tiles set     .each(function(){       $(this)         // add photo container         .append('<div class="photo"></div>')         // text show zoom level on current item in example         .append('<div class="txt"><div class="x">'+ $(this).attr('data-scale') +'x</div>zoom on<br>hover</div>')         // set background image each tile based on data-image attribute         .children('.photo').css({'background-image': 'url('+ $(this).attr('data-image') +')'});     }) 

html

  <div class="tiles">     <div class="tile" data-scale="1.1" data-image="http://ultraimg.com/images/0ys4a9e.jpg"></div>     <div class="tile" data-scale="1.6" data-image="http://ultraimg.com/images/hzq2igw.jpg"></div>     <div class="tile" data-scale="2.4" data-image="http://ultraimg.com/images/bnewgwb.jpg"></div>   </div> 

css

  @import url(http://fonts.googleapis.com/css?family=roboto+slab:700);    body {     background: #fff;     color: #000;     margin: 0;   }    .tiles {     position: absolute;     top: 0;     left: 0;     width: 100%;     height: 100%;   }    .tile {     position: relative;     float: left;     width: 33.333%;     height: 100%;     overflow: hidden;   }    .photo {     position: absolute;     top: 0;     left: 0;     width: 100%;     height: 100%;     background-repeat: no-repeat;     background-position: center;     background-size: cover;     transition: transform .5s ease-out;   }    .txt {     position: absolute;     z-index: 2;     right: 0;     bottom: 10%;     left: 0;     font-family: 'roboto slab', serif;     font-size: 9px;     line-height: 12px;     text-align: center;     cursor: default;   }    .x {     font-size: 32px;     line-height: 32px;   }