JSFiddle - React, Tailwind, and code Playground

by Beroza Paul

HTML

</div>
	<div class="container">
		<div id="result" class="result">&nbsp</div>
		<div class="slot-container">
				<div id="slot1" class="slot"></div>
				<div id="slot2" class="slot"></div>
				<div id="slot3" class="slot"></div>
			<div><button id="control" class="btn">START</button></div>
			<div id="try" class="result try">TRY 0</div>
		</div>

	</div>

CSS

body {
    font-family: Courier New;
    background: url(images/win.gif) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding-top: 138px;
}
.bd {
    text-align:center;
}
.container {
    margin: auto;
    width: 283px;
    height: 350px;
    position: relative;
}
.slot-wrapper {
    position: relative;
    background-color: #e5c100;
}
.slot {
    background:url("http://kookoo.in/images/reel_normal.png") repeat-y;
    width:95px;
    height:70px;
    float:left;
    background-position:0 4px;
    background-position-x:7px !important;
    box-shadow: inset 6px 0px 58px -6px #030303,-50px -50px 5px -100px #DDDDDD;
    -webkit-box-shadow: inset 6px 0px 58px -6px #030303,-50px -50px 5px -100px #DDDDDD;
    -moz-box-shadow: inset 6px 0px 58px -6px #030303,-50px -50px 5px -100px #DDDDDD;
    -o-box-shadow: inset 6px 0px 58px -6px #030303,-50px -50px 5px -100px #DDDDDD;
}
.blink_me {
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;

    -moz-animation-name: blinker;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;

    animation-name: blinker;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@-moz-keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

@-webkit-keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

@keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}
.motion {
    background:url("images/reel_blur.png") repeat-y;
}
.frame {
    width: 122%;
    height: 137%;
    position: absolute;
    right: -11%;
    top: -16%;
}
.slot-container {
    width:285px;
 ...

JavaScript

var img = new Image();
    img.src = $('.slot').css('background').replace(/.*\s?url\([\'\"]?/, '').replace(/[\'\"]?\).*/, '');
    alert( img.width + ' and ' + img.height);