<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<div class='card shadow elbrus'>
	<input type='checkbox' id='modal-1'>
	<div class='circle shadow'>
	<label for='modal-1' class='rotatePlus' title="Read more...">+</label>
	</div>
	<h1>Mount Elbrus</h1>
	<p>Mount Elbrus is the highest peak in the Caucasus, and the highest peak in Europe. It is located several miles north of the main crest of the Central Caucasus, in the Russian Republics of Kabardino-Balkaria and Karachay-Cherkessia, north of Georgia...</p>
	<div class='tags'>
		<i class="fas fa-tag"></i>
		<a href='#'class="tag">Russia</a>
		<a href='#'class="tag">mountains</a>
		<a href='#'class="tag">nature</a>
	</div>
</div>
<div class='card shadow everest'>
	<input type='checkbox' id='modal-2'>
	<div class='circle shadow'>
	<label for='modal-2' class='rotatePlus' title="Read more...">+</label>
	</div>
	<h1>Mount Everest</h1>
	<p>Mount Everest is Earth's highest mountain above sea level, located in the Mahalangur Himal sub-range of the Himalayas. The China–Nepal border runs across its summit point. Its elevation (snow height) of 8,848.86 m was most recently established in 2020 by the Chinese and Nepali authorities.</p>
	<div class='tags'>
		<i class="fas fa-tag"></i>
		<a href='#'class="tag">China</a>
		<a href='#'class="tag">Nepal</a>
		<a href='#'class="tag">mountains</a>
		<a href='#'class="tag">nature</a>
	</div>
</div>
@import url('https://fonts.googleapis.com/css?family=Montserrat');
@import url('https://use.fontawesome.com/releases/v5.7.1/css/all.css');
* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: 'Montserrat', sans-serif;
}

body {
	font-family: Arial, sans-serif;
	color: black;
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}
.card {
	display: flex;
	flex-direction:column;
	width: 320px;
	height: 400px;
	margin: 32px;
	justify-content: center;
	align-items: center;
/* 	background: url(); */
	background-size:cover;
	border-radius: 16px;
	position:relative;
	overflow: hidden;
}
.elbrus {
	background-image: url('https://images.unsplash.com/photo-1546530728-628d62351932');
}
.everest {
	background-image: url('https://ne-kurim.ru/forum/attachments/gora-dzhomolungma-everest-jpg.1561832/');
/* 	width: 320px; */
}

.shadow {
	box-shadow: 0px 1.5px 5px rgba(24,24,24, 0.046),
							0px 4px 15.8px rgba(24,24,24, 0.057),
							0px 8.4px 30.2px rgba(24,24,24, 0.059),
							0px 15.9px 46.8px rgba(24,24,24, 0.066),
							0px 30.7px 64.6px rgba(24,24,24, 0.084),
							0px 84px 80px rgba(24,24,24, 0.12);
}
input[id^='modal'] {
	display: none;
}
.circle {
	font-size:50px;
	font-weight: normal;
	color: rgba(98,0,238,1);
	display: flex;
	width: 40px;
	height: 40px;
	padding: 1px 0 0 1px;
	background: rgba(3,218,197,.9);
	border-radius: 10000px;
	justify-content: center;
	align-items: center;
	transition: 0.4s all cubic-bezier(.7,0,.3,1);
	position: absolute;
	bottom:10px;
	right:10px;
}
.circle:hover {
	background: rgba(2,176,168,1);
}
.card > h1{
	font-size:20px;
	color: #000;
	position: absolute;
	top:20px;
	left:20px;
	z-index: 999;
	transition: 0.4s all cubic-bezier(.7,0,.3,1);
}
.everest > h1 {
	color: #fff;
}
.card > p{
	display: block;
	position: absolute;
	top: 72px;
	font-size:15px;
	color: #fff;
	margin-top: 20px;
	padding: 0px 20px 20px;
	opacity: 0;
	z-index: 999;
	transition: 0.2s all cubic-bezier(.7,0,.3,1);
	line-height: 1.5;
/* 	max-height: 250px; */
/* 	background: #ccc; */
	
}
.tags {
	z-index: 988;
	font-size:11px;
	color:#fff;
	position: absolute;
	top:60px;
	left:270px;
	width: 500px;
	height: 25px;
	/*overflow: hidden;*/
	opacity: 0;
	transform: translateX(0);
	transition: .4s all cubic-bezier(1,-0.1,0,1.1);
}
.fas{
	margin: 0 5px 0 0;
}
a.tag:link{
	color:#fff;
	height: 19px;
	box-sizing:border-box;
	display: inline-block;
	background-color: rgba(0,0,0,.3);
	padding: 2px 9px;
	margin: 0 2px 0 0;
	border-radius:15px;
	text-decoration:none;
	box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.2);
	
}
input[id^='modal']:checked ~ h1{
	color:#fff;
	transition: 0.4s all cubic-bezier(.7,0,.3,1);
}
input[id^='modal']:checked ~ p{
	opacity: 1;
	transition: 0.2s all cubic-bezier(.7,0,.3,1) 0.2s;
}
input[id^='modal']:checked + .circle {
	color: rgba(3,218,197,1);
	width: 1500px;
	height: 1500px;
	background: rgba(98,0,238,.75);
	transition: 0.4s all cubic-bezier(.7,0,.3,1);
	bottom:-720px;
	right:-720px;
}
.rotatePlus {
	transform: rotate(0deg);
	transition: .4s transform cubic-bezier(.7,0,.3,1);
	-moz-user-select: none;
	-khtml-user-select: none;
	user-select: none;
	cursor: pointer;
}
.rotatePlus:hover {
	animation: hoverPlus .2s 3 ease-in-out;
}
input[id^='modal']:checked ~ .circle > .rotatePlus {
	transform: rotate(945deg);
	transition: .4s transform cubic-bezier(.7,0,.3,1);
	-moz-user-select: none;
	-khtml-user-select: none;
	user-select: none;
}
input[id^='modal']:checked ~ .circle > .rotatePlus:hover {
	animation: hoverPlusActive .2s 3 ease-in-out;
}
input[id^='modal']:checked ~ .tags {
	opacity: 1;
	transform: translateX(-250px);
	transition: .4s all cubic-bezier(1,-0.1,0,1.1);
}
input[id^='modal']:checked ~ .tags>a.tag:hover {
	transition: .2s all ease-in-out;
	color:#000;
	font-weight: bold;
	background-color: #03DAC3;
	box-shadow: 0px 0px 7px 3px rgba(3,218,197,0.2);
}
.tags>a.tag:visited{
	color:#fff;
}

@keyframes hoverPlus { 
	0% {
			transform: rotate(0deg);
	}
	25% {
			transform: rotate(-5deg);		
	}
	75% {
			transform: rotate(5deg);		
	}
}

@keyframes hoverPlusActive { 
	0% {
			transform: rotate(945deg);
	}
	25% {
			transform: rotate(940deg);		
	}
	75% {
			transform: rotate(950deg);		
	}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.