<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="a.css">
</head>
<body>
<div class="outer">
<div class="inner">
<a class="container center-container" href="#0"></a>
<div class="container image-container"></div>
<div class="container image-container"></div>
<div class="container image-container"></div>
<div class="container image-container"></div><div class="container image-container last"></div>
<div class="bg"></div>
</div></div>
</body>
</html>
CSS SOURCE CODE
body {height: 100%;
width: 100%;
margin: 0;
background: #222;
overflow: hidden;}
.outer {height: 100vh;
width: 100vw;}
.container {position: absolute;
border-radius: 100%;
top: 50vh;
left: 50vw;
border: 2px solid #fff;
transform: translateY(-50%) translateX(-50%);
background-size: 100vw 100vh;
background-position: center center;
transition: height 0.3s, width 0.3s, opacity 0.3s, box-shadow 0.3s, transform 0.3s;}
.container:not(.last):hover {
box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
}
.container:hover ~ .image-container {
opacity: 0.25;
}
.center-container {
height: 6rem;
width: 6rem;
z-index: 11;
background-color: #222;
}
.center-container:focus {
height: 0.1px;
width: 0.1px;
pointer-events: none;
}
.center-container:focus ~ .container {
transform: translateY(-50%) translateX(-50%) rotate(120deg) scale(0.5);
pointer-events: none;
opacity: 0 !important;}
.bg {position: absolute;
width: 100vw;
height: 100vh;
z-index: -1;
opacity: 1;
transition:opacity 0.3s, background 0.3s;
background-image: url("image/a9.jpg");
background-size: 100vw 100vh;
background-position: center center;}
.image-container:nth-of-type(1) {
z-index: 9;
height: 9rem;
width: 9rem;
background-image: url("image/a4.jpg");
opacity: 1;}
.image-container:nth-of-type(1):hover {
height: 10rem;
width: 10rem;}
.image-container:nth-of-type(1):hover ~ .bg {
background-image: url("image/a4.jpg");
opacity: 1;}
.image-container:nth-of-type(2) {
z-index: 8;
height: 12rem;
width: 12rem;
background-image: url("image/a5.jpg");
opacity: 1;}
.image-container:nth-of-type(2):hover {
height: 13rem;
width: 13rem;}
.image-container:nth-of-type(2):hover ~ .bg {
background-image: url("image/a5.jpg");
opacity: 1;}
.image-container:nth-of-type(3) {
z-index: 7;
height: 15rem;
width: 15rem;
background-image: url("image/a6.jpg");
opacity: 1;}
.image-container:nth-of-type(3):hover {
height: 16rem;
width: 16rem;}
.image-container:nth-of-type(3):hover ~ .bg {
background-image: url("image/a6.jpg");
opacity: 1;}
.image-container:nth-of-type(4) {
z-index: 6;
height: 18rem;
width: 18rem;
background-image: url("image/a8.jpg");
opacity: 1;}
.image-container:nth-of-type(4):hover {
height: 19rem;
width: 19rem;}
.image-container:nth-of-type(4):hover ~ .bg {
background-image: url("image/a8.jpg");
opacity: 1;}
.image-container:nth-of-type(5) {
z-index: 5;
height: 21rem;
width: 21rem;
background-image: url("image/a2.jpg");
opacity: 1;}
.image-container:nth-of-type(5):hover {
height: 22rem;
width: 22rem;}
.image-container:nth-of-type(5):hover ~ .bg {
background-image: url("image/a2.jpg");
opacity: 1;}
AWESOME
ReplyDelete