JSFiddle - React, Tailwind, and code Playground

by gazz96

HTML

<body>

	<div class="konten-box">   	
            <ul>
                <div class="konten-item">
                    <li>
                   	  <span>
                        	<img src="http://i1270.photobucket.com/albums/jj618/087867894423/ME2.jpg" />
                        </span>
                    </li>
                    
                    <li><h3>Lorem Ipsum</h3></li>
                    <li><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></li>
                    
                    <li><p>10 orang menyukai ini</p></li>
                    <div class="read"><a href="#" data-type="page-transition">Read More</a></div>
                  </div>
                
            </ul>
    </div>


<div class="bg-layer"></div>
<div class="loading-bar"></div>
<div class="loading-text"><h3>LOADING</h3></div>

CSS

*{
	margin:0;
	padding:0;
}

ul,li{
	list-style:none;
}

a{
	text-decoration:none;
}

body{
	font-family:Arial, Helvetica, sans-serif;
}

.konten-item{
	
}

.konten-item{
	width:25%;
	margin:10% 37%;
	box-shadow:0 0px 30px rgba(0,0,0,.30);
}

.konten-item li{
	padding:10px;
	background:#5BB9F0;
	color:#fff;
}

.konten-item li:nth-child(1){
	padding:0;
	background:#5BB9F0;
}

.konten-item img{
	width:100%;
	opacity:1;
	transition:all .30s ease .30s;
}

/*
awal animasi
*/

.konten-item li:nth-child(2),
.konten-item li:nth-child(3){
	transform:translateY(0);
	transition:all .30s ease .30s;
}

.konten-item:hover li:nth-child(2),
.konten-item:hover li:nth-child(3){
	transform:translateY(-25px);
	transition:all .30s ease .30s;
}

.konten-item:hover li img{
	opacity:.70;
	transition:all .30s ease .30s;
}

.konten-item:hover .read{
	opacity:100;
}

.read{
	opacity:0;
	width:25%;
	height:auto;
	position:absolute;
	margin-top:-62px;
	box-shadow:inset 0px 0 #FFF;
	transition:all .20s ease .20s;
}

.read a{
	color:#5BB9F0;
	font-size:20px;
	padding-left:10px;
}

.change .bg-layer{
	position:fixed;
	width:100%;
	height:100%;
	top:50%;
	left:50%;
	bottom:auto;
	right:auto;
	background:#52B3D9;	
	transform:translateX(-50%) translateY(-50%);
}

.change .loading-bar{
	position:fixed;
	top:50%;
	left:20%;
	width:60%;
	height:2px;
	background:#FFF;
	box-shadow:inset 0 0 0 #000;
	animation:alternate bar 5s infinite;
}

.change .loading-text{
	position:fixed;
	z-index:4;
	top:52%;
	left:45%;
}

.loading-text h3{
	color:#fff;
	visibility:hidden;
}

.change .loading-text h3{
	visibility:visible;
}


@keyframes bar{
	0%{
		box-shadow:inset 0px 0 0 #000;
	}
		
	100%{
		box-shadow:inset 900px 0 0 #000;
	}
}

JavaScript

$(document).ready(function(){
   $(".read a").click(function(e){
				$("body").addClass("change");
       
				setInterval(function(){
					$("body").removeClass("change");
					},3500);
           
	});
        
 });