JSFiddle - React, Tailwind, and code Playground

by AltIvan

HTML

<div style="margin:0 auto; width:500px; margin-top:100px;" title="div">

<img src="http://4.bp.blogspot.com/_QVkfVFtVZ7g/TUvxdreq_VI/AAAAAAAAEm4/isyOg1B5AO8/s1600/TetasDs.jpg" width="100"  />
<img src="http://fotos0.mundofotos.net/2009/21_09_2009/firox1253553767/sexy-linda-mira-k-tetas.jpg" width="100"  />


</div>

CSS

*{
    margin:0;
    padding:0;
    
}

body, html{

    min-height:100%;
    min-width:100%;

    
}

JavaScript

$(document).ready(function(){

var zoom = 3;

var seleccion = $("img")
var reglas_css = {
      'position' : 'absolute',
      'z-index' : '200',
    
    }

seleccion.mouseover(function(){
    
    
    var padre = $(this).parent();
    $(".img_clone").hide()

    
    if(padre.hasClass("contenedor_imagen")){
        padre.children(".img_clone").show()
    } else {
        
        

    var new_width = $(this).width() * zoom;
 

    

    var unclon = $(this).clone().attr("width",new_width).addClass("img_clone").hide()
    
    
    $(this).after(unclon)    
    var refclon = $(this).next();
    $(this).add(refclon).wrapAll("<span class='contenedor_imagen' style='position:relative'>");
    
    var new_top = ((this.height/(6-zoom)) * -1) + "px";
    var new_left = ((this.width/(6-zoom)) * -1) + "px";
    
    if($.browser.msie){
    //new_top = (((this.height/(6-zoom)) * -1) - 70) + "px";
    new_left = (((this.width/(6-zoom)) * -1 ) - ( this.width )) + "px";
        
    }
    
    refclon.css(reglas_css).css("margin-top", new_top).css("margin-left", new_left).show();
    
    
    refclon.mouseout(function(){
    $(this).hide()    
    }).mouseover(function(){
    $(this).show()    
    })
    
    refclon.mouseout();
    refclon.mouseover();
    
    } // Fin else {        
    
})


})