JSFiddle - React, Tailwind, and code Playground

by Mark Coleman

HTML

<script src="http://www.protofunc.com/scripts/jquery/backgroundPosition/jquery.backgroundPosition.js"></script>
<div id="product_family_options_dd">
</div>

CSS

#product_family_options_dd
{
    background-image:url(http://www.apartmenttherapy.com/uimages/ny/4-17-stack-drawers-1.jpg);
    border: solid 1px black;
    height:400px;
    width:100px;
}

JavaScript

$('#product_family_options_dd').css({
    backgroundPosition: "0 0"
}).hover(function() {
    $(this).stop().animate({
          height: '400px',
  width: '900px',
        backgroundPosition: "(200px 0px)"
    }, {
        duration: 900
    });
}, function() {
    $(this).stop().animate({
          height: '400px',
  width: '100px',
        backgroundPosition: "(0px 0px)"
    }, {
        duration: 900
    });
});