JSFiddle - React, Tailwind, and code Playground

by Murat Kezli

HTML

<div id="lists" class="list" data-class="001" data-img="http://dreamicus.com/data/eye/eye-02.jpg" data-h1="Two Frogs Lorem Impsum Samet" data-p="Impsum Samet Lorem" data-link="#">
</div>

<div id="lists" class="list" data-class="001" data-img="https://static.pexels.com/photos/46216/sunflower-flowers-bright-yellow-46216.jpeg" data-h1="Two Frogs Lorem Impsum Samet" data-p="Impsum Samet Lorem" data-link="#">
</div>

CSS

:root {
   --background: white;
   --text: white;
   --shadow: 10px 0 15px black;
 }
 
 @import url('https://fonts.googleapis.com/css?family=Muli:200,300,400,700&subset=latin-ext');
 body {
   font-family: 'Muli', sans-serif;
   color: white;
   background-color: var(--background);
 }
 
 #lists {
   width: 350px;
   height: 460px;
   overflow: hidden;
   background-color: #222222;
   padding: 0px;
   float: left;
   margin: 10px;
 }
 
 .listimg {
   width: 100%;
   height: 220px;
   overflow: hidden;
   float: left;
 }
 
 #lists .listimg img {
   width: 100%;
   height: 220px;
   -moz-transition: all 0.3s;
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
 }
 
 #lists:hover {
   cursor: pointer;
 }
 
 #lists:hover > .listimg img {
   -moz-transform: scale(1.3);
   -webkit-transform: scale(1.3);
   transform: scale(1.3);
   -webkit-filter: blur(5px);
   filter: blur(5px);
 }
 
 #lists h1 {
   margin: 20px;
   display: inline-block;
   margin-bottom: 0px;
 }
 
 #lists p {
   margin: 20px;
 }
 
 .listdetail {
   text-align: right;
   font-weight: 200;
   padding-top: 6px;
   padding-bottom: 6px;
 }

JavaScript

$('div#lists').on("click", function(e) {
  var x = $(this).attr("data-class");
  var img = $(this).attr("data-img");
  var h1 = $(this).attr("data-h1");
  var p = $(this).attr("data-p");
  var creatediv = "<div class='listimg'><img src='" + img + "'></div><div class='listtext'><h1>" + h1 + "</h1><p>" + p + "</p></div><div class='listdetail'><p>Click for More Details...</p></div>"
  $(this).html(creatediv);
  //alert(x);
  //alert("tetiklendi");
});


$('div#lists').trigger("click");







//