JSFiddle - React, Tailwind, and code Playground

by leongaban

HTML

<img src="http://f.cl.ly/items/3k3d1g3K34470d2v2K3O/50d942d85384a.jpeg">

CSS

@keyframes stripes {
            to {
                background-position: 0 50px;
            }
        }
        @-webkit-keyframes stripes {
            to {
                background-position: 0 50px;
            }
        }
        body { padding: 10px;}
        img {
            padding: 30px;
            background: -moz-linear-gradient(-45deg, #ccc 24%, #fff 25%, #fff 49%, #ccc 50%, #ccc 74%, #fff 75%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, right bottom, color-stop(24%,#ccc), color-stop(25%,#fff), color-stop(49%,#fff), color-stop(50%,#ccc), color-stop(74%,#ccc), color-stop(75%,#fff)); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(-45deg, #ccc 24%,#fff 25%,#fff 49%,#ccc 50%,#ccc 74%,#fff 75%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(-45deg, #ccc 24%,#fff 25%,#fff 49%,#ccc 50%,#ccc 74%,#fff 75%); /* Opera 11.10+ */
            background: -ms-linear-gradient(-45deg, #ccc 24%,#fff 25%,#fff 49%,#ccc 50%,#ccc 74%,#fff 75%); /* IE10+ */
            background: linear-gradient(135deg, #ccc 24%,#fff 25%,#fff 49%,#ccc 50%,#ccc 74%,#fff 75%); /* W3C */
            background-size: 50px 50px;
            background-position: 0 0;
            box-shadow: inset 0 0 0 30px white;
            transition: box-shadow linear 0.5s;
            -webkit-transition: box-shadow linear 0.5s;
            animation: stripes 1s linear infinite;
            -webkit-animation: stripes 1s linear infinite;
        }
        img:hover {
            box-shadow: inset 0 0 0 30px rgba(255,255,255,0);
        }