<p class="logtxt">Details Link was Clicked</p>

<section class="cardwrapper">
 <div class="card">
  <div class="imgBx">
   <nav></nav>
  </div>
  <div class="details">
   <h2>What is Lorem Ipsum?</h2>
   <p><a href="#">Lorem Ipsum</a> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it
    to make a type specimen book.</p>
   <nav></nav>
  </div>
 </div>

 <div class="card">
  <div class="imgBx">
   <nav></nav>
  </div>
  <div class="details">
   <span>MENU</span>
   <ul>
    <li><a href="#">Lorem Ipsum is simply dummy text</a></li>
    <li><a href="#">Printing and typesetting industry</a></li>
    <li><a href="#">Has been the industry's standard</a></li>
    <li><a href="#">Ever since the 1500s</a></li>
    <li><a href="#">A Printer took a galley of type</a></li>
    <li><a href="#">Scrambled it to make a type specimen book</a></li>
   </ul>
   <nav></nav>
  </div>
 </div>

 <div class="card">
  <div class="imgBx">
   <nav></nav>
  </div>
  <div class="details">
   <h2>What is Lorem Ipsum?</h2>
   <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
   <nav></nav>
  </div>
 </div>

</section>
*, *:before, *:after {
	box-sizing: border-box;
}
body{
	overflow-y:visible;
}
.cardwrapper {
	display:flex;
	min-height:100vh;
	flex-wrap: wrap;
	justify-content:center;
	_align-items:center;
	background:#f5f5f5;
	border: 1px solid red;
padding:.5em;
}
.card {
	position: relative;
	margin: 10px 1%;
	width:31%;
	max-width: 280px;
	max-height: 280px;
	min-width: 260px;
	min-height: 260px;
	background: #222;
	overflow: hidden;
		  border-radius: 10px;

}
.card .imgBx, .card .details {
	width: 100%;
	height: 100%;
	position: absolute;
		  border-radius: 10px;

}

.card .imgBx {
	top: 0;
	left: 0;
	background-color: #ccc;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	padding: .5em;
	transition: left .5s;
	  will-change: left;

}

.card:nth-of-type(1) .imgBx {
	background-image: url(http://lorempixel.com/400/400/nature/1/);
}

.card:nth-of-type(2) .imgBx {
	background-image: url(http://lorempixel.com/400/400/nature/2/);
}

.card:nth-of-type(3) .imgBx {
	background-image: url(http://lorempixel.com/400/400/nature/3/);
}

.card:hover .imgBx {
	top: 0;
	left: -100%;
}

.card .imgBx img {
	width: 100%;
}

.card .imgBx nav {
  position: relative;
  background: rgba(0, 0, 0, .35);
  width: 34px;
  height: 34px;
  color: white;
	border: 1px solid white;
  border-radius: 50%;
  box-shadow: 0px 0px 16px 1px rgba(255, 255, 255, .75);
  margin: 0px;
	float:right;
}
.card .imgBx nav:after {
  content: '•••';
  position: absolute;
  top: 50%;
  left: 49%;
  transform: translate(-50%, -50%) rotate(90deg);
  font-size: 15px; 
  letter-spacing: 2px;
  margin-top: 1px;
}
/*shows only om touch devices*/
.card .details nav {
	display:none;
  position: absolute;
	right: 10px;
	bottom:10px;
  background: rgba(0, 0, 0, .35);
  width: 34px;
  height: 34px;
  color: white;
	border: 1px solid white;
  border-radius: 50%;
}
.card .details nav:after {
  content: 'X';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 15px; 
  margin-top: 0;
}

.card .details {
		color: #fff;
	background: #222;
	top: 0;
	left: 100%;
	padding: 0;
	transition: left .5s;
	  will-change: left;
}
.card:hover .details {
	top: 0;
	left: 0%;
}

.card .detailsBGtouch {
	background: #444;
}

.card .details h2 {
	text-align: center;
	margin: 0;
	padding: 10px;
	border-bottom: 2px solid #fff;
}

.card .details p {
	margin: 0;
padding: 1em;
}

.card .details p a {
	color: #fffccc;
}

.card .details span {
	color: #999;
	display:block;
line-height:2em;
	text-align: center;
	letter-spacing: 10px;
}

.card .details ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.card .details li a {
	display:block;
	color: #fff;
	text-decoration: none;
	padding: 5px 1em;
		background:#444;
	border-top: 1px solid #666;
		border-bottom: 1px solid #000;
font-size:90%;
	line-height:1;
}
.card .details li a:hover {
	background:#333;
}

.logtxt{opacity:0;
position:absolute;
	width:100%;
	height:40px;
	z-index:2;
	background:rgba(0,0,0,.5);
	margin:0;
}
//For touch devices
//USING each function
$(".card").each(function() {
	var $card = $(this);
	var $activeCardImg = $card.find(".imgBx");
		var $activeCardImgNav = $card.find(".imgBx nav");
	var $activeDetails = $card.find(".details");
	var $detailsNav = $card.find(".details nav");

	$activeCardImgNav.on("touchstart", function(e) {
		$activeDetails.removeClass("detailsBGtouch");
		$(this).css("left", "-110%");
		$activeDetails.css("left", "0%");
		e.preventDefault();
	});

	$detailsNav.on("touchstart", function(e) {
		$activeDetails.addClass("detailsBGtouch");
		//$(this).animate("left", "100%");
		$activeDetails.delay(0).animate(
			{ left: "100%" },
			{
				duration: "fast", // how fast we are animating
				easing: "swing", // the type of easing
				complete: function() {
					// the callback
					console.log("callback close details");
				}
			}
		);
		$activeCardImg.css("left", "0%");
		$activeCardImgNav.css("left", "0%");
		e.preventDefault();
	});
});

$(".details").find('a').on("click touchstart", function() {
	//$('.log').css("opacity", "1");
	//$(this).delay(5000).animate("opacity", "0");
	$(".logtxt").animate(
		{ opacity: "1" },
		{
			complete: function() {
				// the callback
				$(".logtxt").delay(1000).animate({ opacity: "0" });
			}
		}
	);
});

function isMobileDevice() {
	var isTouch = {
		any: function() {
			return (
				typeof window.orientation !== "undefined" ||
				navigator.userAgent.indexOf("IEMobile") !== -1
			);
		}
	};
	if (isTouch.any()) $(".details").find("nav").css("display", "block");
}
isMobileDevice();
/*
//USING - vanilla function
function initCard(selector){
	var $card = $(selector);
	var $activeCard = $card.find(".imgBx");
	var $activeDetails = $card.find(".details");

	$activeDetails.on("touchstart", function(e){
		e.preventDefault();
		$(this).css("left", "100%");
		$activeCard.css("left", "0%");
	});

	$activeCard.on("touchstart", function(e){
		$(this).css("left", "-100%");
		$activeDetails.css("left", "0%");
		e.preventDefault();
	});
}

initCard(".c1x");
initCard(".c2x");
initCard(".c3x");

//CARD 2
$(".c2 .details").on("touchstart", function(e) {
	$(this).css("left","100%");
	$(".imgBx").css("left","0%");
	e.preventDefault();
});

$(".c2 .imgBx").on("touchstart", function(e) {
	$(this).css("left","-100%");
	$(".c2 .details").css("left","0%");
	e.preventDefault();
});

//CARD 3
$(".c3 .details").on("touchstart", function(e) {
	$(this).css("left","100%");
	$(".imgBx").css("left","0%");
	e.preventDefault();
});

$(".c3 .imgBx").on("touchstart", function(e) {
	$(this).css("left","-100%");
	$(".c3 .details").css("left","0%");
	e.preventDefault();
});
*/
//card height
function setCardHeight() {
	var cardwidth = $(".card").width();
	$(".card").css("height", cardwidth);
}
setCardHeight();
$(window).resize(function() {
	setCardHeight();
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js