JSFiddle - React, Tailwind, and code Playground

by Vuthy Sok

HTML

<div>
			<span class="image-bg">
				<span style="background-image: url('http://4.bp.blogspot.com/-x5HobgoEVk8/VWvCTs4F4II/AAAAAAAABQU/i0TQvShjQuQ/s1600/demo1.jpg');" class="image-shop-scroll"></span>
				<span class="glare"></span>
			</span>
		</div>

CSS

.image-bg {
				margin:0;
				padding:0;
				background-image: url("http://3.bp.blogspot.com/-Bi0vq9hm5dM/VWvCcySgM1I/AAAAAAAABQc/fThyaLpidSE/s1600/landingpage_07.jpg");
				background-repeat: no-repeat;
				display: inline-block;
				height: 344px;
				padding-top: 31px;
				position: relative;
				width: 457px;
			}
			.image-bg:hover .image-shop-scroll {
				background-position: center 100% !important;
			}
			.image-bg .image-shop-scroll {
				transition: all 5s ease-out 0s;
			}
			.image-bg .image-shop-scroll {
				background-position: center 0;
				background-repeat: no-repeat;
				height: 313px;
				left: 0;
				margin-bottom: 20px;
				overflow: hidden;
				position: absolute;
				width: 100%;
			}