JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head></head>
<body>
<div class="video" style="background-image:url(http://i54.tinypic.com/347gwm0.jpg);"></div>
<div class="video" style="background-image:url(http://i54.tinypic.com/347gwm0.jpg);"></div>
<div class="video" style="background-image:url(http://i54.tinypic.com/347gwm0.jpg);"></div>
<div class="video" style="background-image:url(http://i54.tinypic.com/347gwm0.jpg);"></div>
</body>
</html>
CSS
.video { width:140px;height:90px;margin-bottom:25px; }
JavaScript
/**
* Image background mover Plugin
*
* Based on: CJ Image Video Previewer 1.1
* URL: http://www.cjboco.com/projects.cfm/project/cj-image-video-previewer/1.1.0
*
* Copyright (c) 2010, Doug Jones. All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions
* are met:
*
* a) Redistributions of source code must retain the above copyright
* notice, this list of conditions and the following disclaimer.
*
* b) Redistributions in binary form must reproduce the above copyright
* notice, this list of conditions and the following disclaimer in the
* documentation and/or other materials provided with the distribution.
*
* c) Neither the name of the Creative Juices, Bo. Co. nor the names of its
* contributors may be used to endorse or promote products derived from
* this software without specific prior written permission.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
* "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
* LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
* A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
* OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
* SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
* LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
* DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
* THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
* (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*
* For further information, visit the Creative Juices website: www.cjboco.com.
*/
(function ($) {
$.fn.moveBackground = function (options) {
var settings = {
delay: 300,
height: 90,
...