HTML SOURCE CODE
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="b.css">
</head>
<body>
<form action="">
<input type="radio" id="1" name="sld">
<label for="1">
<img src="image/a8.jpg" width="150" height="200">
<a href="image/a8.jpg">
open</a>
</label>
<input type="radio" id="2" name="sld">
<label for="2">
<img src="image/a7.jpg" width="150" height="200">
<a href="image/a7.jpg">
open</a>
</label>
<input type="radio" id="3" name="sld">
<label for="3">
<img src="image/a6.jpg" width="150" height="200">
<a href="image/a6.jpg">
open</a>
</label>
<input type="radio" id="4" name="sld">
<label for="4">
<img src="image/a5.jpg" width="150" height="200">
<a href="image/a5.jpg">
open</a>
</label>
<input type="radio" id="5" name="sld">
<label for="5">
<img src="image/a4.jpg" width="150" height="200">
<a href="image/a4.jpg">
open</a>
</label>
</body>
</html>
CSS SOURCE CODE
* {box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Oxygen';}
body{background:linear-gradient(280deg,lightpink,skyblue,lightyellow,greenyellow);}
form {
margin: calc((100vh - 200px) /2) auto;
text-align: center;}
input[type="radio"] {display: none;}
input[type="radio"]:checked ~ label {
transform:skew(20deg) rotate(20deg);}
input[type="radio"]:checked + label {
margin: 0 50px;
transform: none;}
label {position: relative;
margin: 0 -35px;
display: inline-block;
width: 150px;
height: 200px;
line-height: 200px;
color: #ddd;
font-size: 2em;
border-radius: 5px;
box-shadow: 0 10px 6px -6px #777;
transform:skew(-20deg) rotate(-20deg);
transition: .3s;}
label:nth-of-type(1) {
background: #1abc9c;}
label:nth-of-type(2) {
background: #3498db;}
label:nth-of-type(3) {
background: #e67e22;}
label:nth-of-type(4) {
background: #9b59b6;}
label:nth-of-type(5) {
background: #f1c40f;}
a{position: absolute;
margin-top: 120px;
text-decoration: none;
font-size: .5em;
display: inline-block;
margin-left: -100px;}
