JSFiddle - React, Tailwind, and code Playground

by yoowordpress

HTML

<div class="cart"></div>
<div class="clear"></div>
<div class="tov_blosk">
    <div class="tovar"><img src="https://www.gravatar.com/avatar/8aebfb452b05e8ddeb0937555e6902e9?s=56"/></div>
     <span>В корзину</span>
</div>
<div class="tov_blosk">
    <div class="tovar"><img src="https://www.gravatar.com/avatar/8aebfb452b05e8ddeb0937555e6902e9?s=56"/></div>
     <span>В корзину</span>
</div>
<div class="tov_blosk">
    <div class="tovar"><img src="https://www.gravatar.com/avatar/8aebfb452b05e8ddeb0937555e6902e9?s=56"/></div>
     <span>В корзину</span>
</div>
<div class="tov_blosk">
    <div class="tovar"><img src="https://www.gravatar.com/avatar/8aebfb452b05e8ddeb0937555e6902e9?s=56f"/></div>
     <span>В корзину</span>
</div>

CSS

.tov_blosk {
    float: left;
    margin: 25px;
    width: 120px;
}
.clear{clear:both;}
.tovar {
}
.cart {
    background: none repeat scroll 0 0 #008000;
    float: right;
    height: 50px;
    width: 50px;
}
span {
    border: 2px solid #eee;
    padding: 5px 10px;
    margin-top: 10px;
    display: block;
    color: #fff;
    background-color: #2e9681;
    text-align: center;
    cursor:pointer;
}
span:hover{
  background-color:#134037;
}
.ui-effects-transfer {
    background-size: auto 100%;
    border: 1px solid;
    background-repeat: no-repeat;
}
img {
    width: 100%;
}

JavaScript

$('span').click(function(){
    var tov_img = $(this).parent().children('.tovar');
    var back = $(tov_img).children('img').attr('src');
    $(tov_img).effect("transfer", {to: $(".cart") },1000);
    
    $('.ui-effects-transfer').css('background-image','url('+ back +')');
})