To get this FooBar to work, you will need to do the following:

  1. Upload your transparent png to your media library taking note of it’s width and height
  2. Create a foobar as you would normally
  3. Add some custom CSS, which uses the newly uploaded image and it’s dimensions. (You can also change the position of the image if you like)
    .foobar-expanded .foobar-shadow:before {
      content:'';
      height: 206px;    /* height of your image */
      width:250px;      /* width of your image */
      background: url('http://themergency.com/wp-content/uploads/2015/01/donald.png') no-repeat left bottom;
      bottom: 0px;
      position: absolute;
      left: 15%;        /* you can change this */
      z-index:999;
    }
    
  4. add the following code to the Custom JS:
    $foobar("option", "events", {
    	expanding: function(){
    		jQuery("body").addClass("foobar-expanded");
    	},
    	collapsing: function(){
    		jQuery("body").removeClass("foobar-expanded");
    	},
    	setExpanded: function(o){
    		jQuery("body").addClass("foobar-expanded");
    	}	
    });