JSFiddle - React, Tailwind, and code Playground

by Artikandri

HTML

<div class="home container"
<ul>
				<!--ditambahkan deskripsi, tapi berat. animasinya pakai css3, saya gagal jquery orz-->
				<li class="opinion wrapper">
					<div class="opinion container">
	 					<div class="entry entry-1" style="background-image:url(https://i.imgur.com/kUCMPWX.jpg);">
		 						<a href="" title="" class="article link"></a>
		 						<div class="opinion content">

		 							<a href="" title="" class="article link"></a>
			 						<h2 class="title">I have here two pledges that I shall yet slay Moby Dick and survive it. </h2>
			 						<span class="details">
			 							<a href="/test" title="" class="author">Nama Penulis</a> /
			 							<a href="/date" title="" class="date ">Tanggal Penulisan</a>
			 						</span>
			 						<p class="description hide-text">
			 							Both were silent again, as one man. The grey dawn came on, and the slumbering crew arose from the boat's bottom, and ere noon the dead whale was brought to the ship.
			 						</p>
			 					</div>
	 					</div>
					</div>
				</li>
			</ul>
      </div>

CSS

/*--------------------------------------------------------
					IMPORT GOOGLE FONTS 
----------------------------------------------------------*/

/*-- Roboto --*/
@import url(https://fonts.googleapis.com/css?family=Roboto:300,300italic,400,400italic,500,500italic,700,700italic);
/*-- Roboto Condensed --*/
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:700,700italic,400,400italic&subset=latin,latin-ext);
/*-- Patua One --*/
@import url(https://fonts.googleapis.com/css?family=Patua+One);


html,
body {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	font-size: 18px;
	font-size: 1rem;
	font-family: 'Roboto', 'Arial', 'sans-serif';
	width: 100%;
	height: 100%;
	line-height: 1.25;
}


::selection{
	background-color: #222;
	color: #fff;
}

h1,
h2,
h3,
h4,
h5,
h6,
a {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	text-decoration: none;
}

a {
	cursor: pointer;
}

a:visited {
	color: inherit;
}

ul, 
li {
	padding: 0 0 0 0;
	margin: 0 0 0 0;
}


li.wrapper {
	list-style-type: none;
}


.home.container {
  width: 1280px;
	margin: auto;
    height: 2000px;
}

.wrapper {
	float: left;
	margin:0 0 0 0;
	padding: 0 0 0 0;
    box-sizing: border-box;
}

.wrapper {
  height: 618px;
  width: 66.66666%;
}


.container {
	position: relative;
	height: inherit;
	overflow: hidden;
}

.opinion.container {
	margin: 15px;
}

.entry {
	height: inherit;
	background-repeat: no-repeat;
	background-position: center center;
    background-size: cover;
}

.entry .content {
    position: absolute; 
    bottom: 20px; 
    left: 20px;
    right: 20px;
    text-align: left;
    z-index: 2;
}

.article.link {
	display: block;
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

.entry > .article.link {
	z-index: 1;
}

.content > .article.link {
	z-index: 2;
}

.content .title,
.content .details {
	background-color: #000;
	color: #fff;
	display: inline;
	position: relative;
}

.content .title {
	font-family: "Patua One", "Georgia", serif;
	font-size:...

JavaScript

$(function() {
	$('.opinion.container').hover(
	  function () {
	    $('.content .description').removeClass("hide-text");
	  },
	  function () {
	    $('.content .description').addClass("hide-text");
	  }
	);
});