diff --git a/index.html b/index.html
new file mode 100644
index 0000000..f9a1a2c
--- /dev/null
+++ b/index.html
@@ -0,0 +1,86 @@
+
+
+
+
+ KAEL
+
+
+
+
+
+
+
+
O Fabuloso mundo de KAEL
+
+
+
+
+
+
+
Layer_2
+
+ Layer_2
+
+
+
+
+
+
+
+
+
Layer_1
+
Layer_1
+
+
+
+
+
+
+
+
Layer_3
+
Layer_3
+
+
+
+
+
+
+
Layer_4
+
Layer_4
+
+
+
+
+
+
+
Layer_5
+
Layer_5
+
+
+
+
+
+
+
Layer_6
+
Layer_6
+
+
+
+
+
+
+
Layer_7
+
Layer_7
+
+
+
+
+
+
+
Layer_8
+
Layer_8
+
+
+
+
+
diff --git a/layer1.html b/layer1.html
new file mode 100644
index 0000000..20eb445
--- /dev/null
+++ b/layer1.html
@@ -0,0 +1,35 @@
+
+
+
+
+ Blog de desing
+
+
+
+
+
+
+
Layer_1 - Aula de Design
+
+
+
+
+
+
+
+
+
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea rem sunt accusamus, aliquam, exercitationem fugit harum explicabo ipsam accusantium totam nobis qui possimus autem, at saepe molestias praesentium eveniet consequatur?
+
+
+
+
+
+
+
Home
+
Home
+
+
+
+
+
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..a71c9a8
--- /dev/null
+++ b/style.css
@@ -0,0 +1,1042 @@
+body,
+html {
+ overflow: hidden;
+ background-color: #050704;
+ margin: 0;
+ font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif;
+}
+
+/* DEMO-SPECIFIC STYLES */
+.typewriter h1 {
+ color: #f0f0f0;
+ font-family: monospace;
+ overflow: hidden; /* Ensures the content is not revealed until the animation */
+ border-right: 0.15em solid #ffa500; /* The typwriter cursor */
+ white-space: nowrap; /* Keeps the content on a single line */
+ margin: 0 auto; /* Gives that scrolling effect as the typing happens */
+ letter-spacing: 0.15em; /* Adjust as needed */
+ -webkit-animation: typing 3.5s steps(30, end), blink-caret 0.5s step-end infinite;
+ animation: typing 3.5s steps(30, end), blink-caret 0.5s step-end infinite;
+}
+
+a {
+ text-decoration:none;
+ color: #f0f0f0;
+}
+
+h2 {
+ color: #f0f0f0;
+ font-family: monospace;
+ width: auto;
+ margin-left: 10%;
+ margin-right: 10%;
+}
+/* The typing effect */
+/* The typewriter cursor effect */
+body {
+ padding-top: 1em;
+ display: -webkit-box;
+ display: flex;
+ -webkit-box-pack: center;
+ justify-content: center;
+}
+@-webkit-keyframes typing {
+ from {
+ width: 0;
+ }
+ to {
+ width: 100%;
+ }
+}
+@keyframes typing {
+ from {
+ width: 0;
+ }
+ to {
+ width: 100%;
+ }
+}
+@-webkit-keyframes blink-caret {
+ from, to {
+ border-color: transparent;
+ }
+ 50% {
+ border-color: #61a26a;
+ }
+}
+@keyframes blink-caret {
+ from, to {
+ border-color: transparent;
+ }
+ 50% {
+ border-color: #61a26a;
+ }
+}
+
+/* end typewriter */
+.f {
+ position: fixed;
+ top: 5px;
+ right: 10px;
+ font-family: 'Arial';
+ font-size: 0.8em;
+ color: #61a26a;
+}
+.f a {
+ color: none;
+}
+
+
+/* home-project */
+
+.home-p {
+ position: absolute;
+ top: 9%;
+ left: 12%;
+ -webkit-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ width: 20px;
+ height: 20px;
+ cursor: pointer;
+}
+
+.home-p:hover .imgMasked {
+ -webkit-clip-path: circle(400px at center);
+ clip-path: circle(400px at center);
+}
+.home-p:hover .home-p-hail {
+ width: 200px;
+ height: 200px;
+ border-radius: 200px;
+}
+.home-p:hover .home-p-hail2 {
+ width: 200px;
+ height: 200px;
+ border-radius: 200px;
+ border: 80px solid #fff4e6;
+ opacity: 0;
+}
+.home-p:hover .home-p-name {
+ left: 200%;
+ opacity: 1;
+}
+.home-p:hover .home-p-name:before {
+ width: 100%;
+}
+.home-p-hail {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ -webkit-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ background-color: none;
+ width: 40px;
+ height: 40px;
+ border-radius: 40px;
+ -webkit-transition: 0.5s;
+ transition: 0.5s;
+ opacity: 0.2;
+}
+.home-p-hail2 {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ -webkit-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ width: 0;
+ height: 0;
+ border-radius: 0;
+ -webkit-transition: 0.7s;
+ transition: 0.7s;
+ border: 22px solid #61a26a;
+ border-radius: 20px;
+ pointer-events: none;
+}
+.imgMasked {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ -webkit-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ top: 50%;
+ height: 200px;
+ -webkit-clip-path: circle(20px at center);
+ clip-path: circle(20px at center);
+ -webkit-transition: 0.5s;
+ transition: 0.5s;
+ pointer-events: none;
+}
+.home-p-name {
+ position: absolute;
+ max-width: 600px;
+ min-width: 150px;
+ left: 0;
+ top: 150%;
+ pointer-events: none;
+ -webkit-transition: 0.5s;
+ transition: 0.5s;
+ color: none;
+ padding: 3px 6px;
+ z-index: 2;
+ opacity: 0;
+}
+.home-p-name:before {
+ content: '';
+ width: 0;
+ height: 100%;
+ background-color: #61a26a;
+ position: absolute;
+ top: 0;
+ left: 0;
+ -webkit-transition: 0.3s;
+ transition: 0.3s;
+ z-index: -1;
+}
+
+/* end-home */
+
+
+.Project {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ -webkit-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ width: 20px;
+ height: 20px;
+ cursor: pointer;
+}
+
+.Project:hover .imgMasked {
+ -webkit-clip-path: circle(400px at center);
+ clip-path: circle(400px at center);
+}
+.Project:hover .Project-hail {
+ width: 200px;
+ height: 200px;
+ border-radius: 200px;
+}
+.Project:hover .Project-hail2 {
+ width: 200px;
+ height: 200px;
+ border-radius: 200px;
+ border: 80px solid #fff4e6;
+ opacity: 0;
+}
+.Project:hover .Project-name {
+ left: 200%;
+ opacity: 1;
+}
+.Project:hover .Project-name:before {
+ width: 100%;
+}
+.Project-hail {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ -webkit-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ background-color: none;
+ width: 40px;
+ height: 40px;
+ border-radius: 40px;
+ -webkit-transition: 0.5s;
+ transition: 0.5s;
+ opacity: 0.2;
+}
+.Project-hail2 {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ -webkit-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ width: 0;
+ height: 0;
+ border-radius: 0;
+ -webkit-transition: 0.7s;
+ transition: 0.7s;
+ border: 22px solid #61a26a;
+ border-radius: 20px;
+ pointer-events: none;
+}
+.imgMasked {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ -webkit-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ top: 50%;
+ height: 200px;
+ -webkit-clip-path: circle(20px at center);
+ clip-path: circle(20px at center);
+ -webkit-transition: 0.5s;
+ transition: 0.5s;
+ pointer-events: none;
+}
+.Project-name {
+ position: absolute;
+ max-width: 600px;
+ min-width: 150px;
+ left: 0;
+ top: 150%;
+ pointer-events: none;
+ -webkit-transition: 0.5s;
+ transition: 0.5s;
+ color: none;
+ padding: 3px 6px;
+ z-index: 2;
+ opacity: 0;
+}
+.Project-name:before {
+ content: '';
+ width: 0;
+ height: 100%;
+ background-color: #61a26a;
+ position: absolute;
+ top: 0;
+ left: 0;
+ -webkit-transition: 0.3s;
+ transition: 0.3s;
+ z-index: -1;
+}
+
+
+.roject {
+ position: absolute;
+ top: 20%;
+ left: 20%;
+ -webkit-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ width: 20px;
+ height: 20px;
+ cursor: pointer;
+}
+
+.roject:hover .imgMasked {
+ -webkit-clip-path: circle(400px at center);
+ clip-path: circle(400px at center);
+}
+.roject:hover .roject-hail {
+ width: 200px;
+ height: 200px;
+ border-radius: 200px;
+}
+.roject:hover .roject-hail2 {
+ width: 200px;
+ height: 200px;
+ border-radius: 200px;
+ border: 80px solid #fff4e6;
+ opacity: 0;
+}
+.roject:hover .roject-name {
+ left: 200%;
+ opacity: 1;
+}
+.roject:hover .roject-name:before {
+ width: 100%;
+}
+.roject-hail {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ -webkit-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ background-color: none;
+ width: 40px;
+ height: 40px;
+ border-radius: 40px;
+ -webkit-transition: 0.5s;
+ transition: 0.5s;
+ opacity: 0.2;
+}
+.roject-hail2 {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ -webkit-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ width: 0;
+ height: 0;
+ border-radius: 0;
+ -webkit-transition: 0.7s;
+ transition: 0.7s;
+ border: 22px solid #61a26a;
+ border-radius: 20px;
+ pointer-events: none;
+}
+.imgMasked {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ -webkit-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ top: 50%;
+ height: 200px;
+ -webkit-clip-path: circle(20px at center);
+ clip-path: circle(20px at center);
+ -webkit-transition: 0.5s;
+ transition: 0.5s;
+ pointer-events: none;
+}
+.roject-name {
+ position: absolute;
+ max-width: 600px;
+ min-width: 150px;
+ left: 0;
+ top: 150%;
+ pointer-events: none;
+ -webkit-transition: 0.5s;
+ transition: 0.5s;
+ color: none;
+ padding: 3px 6px;
+ z-index: 2;
+ opacity: 0;
+}
+.roject-name:before {
+ content: '';
+ width: 0;
+ height: 100%;
+ background-color: #61a26a;
+ position: absolute;
+ top: 0;
+ left: 0;
+ -webkit-transition: 0.3s;
+ transition: 0.3s;
+ z-index: -1;
+}
+
+/* oject */
+.oject {
+ position: absolute;
+ top: 87%;
+ left: 36%;
+ -webkit-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ width: 20px;
+ height: 20px;
+ cursor: pointer;
+}
+
+.oject:hover .imgMasked {
+ -webkit-clip-path: circle(400px at center);
+ clip-path: circle(400px at center);
+}
+.oject:hover .oject-hail {
+ width: 200px;
+ height: 200px;
+ border-radius: 200px;
+}
+.oject:hover .oject-hail2 {
+ width: 200px;
+ height: 200px;
+ border-radius: 200px;
+ border: 80px solid #fff4e6;
+ opacity: 0;
+}
+.oject:hover .oject-name {
+ left: 200%;
+ opacity: 1;
+}
+.oject:hover .oject-name:before {
+ width: 100%;
+}
+.oject-hail {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ -webkit-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ background-color: none;
+ width: 40px;
+ height: 40px;
+ border-radius: 40px;
+ -webkit-transition: 0.5s;
+ transition: 0.5s;
+ opacity: 0.2;
+}
+.oject-hail2 {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ -webkit-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ width: 0;
+ height: 0;
+ border-radius: 0;
+ -webkit-transition: 0.7s;
+ transition: 0.7s;
+ border: 22px solid #61a26a;
+ border-radius: 20px;
+ pointer-events: none;
+}
+.imgMasked {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ -webkit-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ top: 50%;
+ height: 200px;
+ -webkit-clip-path: circle(20px at center);
+ clip-path: circle(20px at center);
+ -webkit-transition: 0.5s;
+ transition: 0.5s;
+ pointer-events: none;
+}
+.oject-name {
+ position: absolute;
+ max-width: 600px;
+ min-width: 150px;
+ left: 0;
+ top: 150%;
+ pointer-events: none;
+ -webkit-transition: 0.5s;
+ transition: 0.5s;
+ color: none;
+ padding: 3px 6px;
+ z-index: 2;
+ opacity: 0;
+}
+.oject-name:before {
+ content: '';
+ width: 0;
+ height: 100%;
+ background-color: #61a26a;
+ position: absolute;
+ top: 0;
+ left: 0;
+ -webkit-transition: 0.3s;
+ transition: 0.3s;
+ z-index: -1;
+}
+
+/* ject */
+
+.ject {
+ position: absolute;
+ top: 20%;
+ left: 82%;
+ -webkit-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ width: 20px;
+ height: 20px;
+ cursor: pointer;
+}
+
+.ject:hover .imgMasked {
+ -webkit-clip-path: circle(400px at center);
+ clip-path: circle(400px at center);
+}
+.ject:hover .ject-hail {
+ width: 200px;
+ height: 200px;
+ border-radius: 200px;
+}
+.ject:hover .ject-hail2 {
+ width: 200px;
+ height: 200px;
+ border-radius: 200px;
+ border: 80px solid #fff4e6;
+ opacity: 0;
+}
+.ject:hover .ject-name {
+ left: 200%;
+ opacity: 1;
+}
+.ject:hover .ject-name:before {
+ width: 100%;
+}
+.ject-hail {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ -webkit-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ background-color: none;
+ width: 40px;
+ height: 40px;
+ border-radius: 40px;
+ -webkit-transition: 0.5s;
+ transition: 0.5s;
+ opacity: 0.2;
+}
+.ject-hail2 {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ -webkit-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ width: 0;
+ height: 0;
+ border-radius: 0;
+ -webkit-transition: 0.7s;
+ transition: 0.7s;
+ border: 22px solid #61a26a;
+ border-radius: 20px;
+ pointer-events: none;
+}
+.imgMasked {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ -webkit-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ top: 50%;
+ height: 200px;
+ -webkit-clip-path: circle(20px at center);
+ clip-path: circle(20px at center);
+ -webkit-transition: 0.5s;
+ transition: 0.5s;
+ pointer-events: none;
+}
+.ject-name {
+ position: absolute;
+ max-width: 600px;
+ min-width: 150px;
+ left: 0;
+ top: 150%;
+ pointer-events: none;
+ -webkit-transition: 0.5s;
+ transition: 0.5s;
+ color: none;
+ padding: 3px 6px;
+ z-index: 2;
+ opacity: 0;
+}
+.ject-name:before {
+ content: '';
+ width: 0;
+ height: 100%;
+ background-color: #61a26a;
+ position: absolute;
+ top: 0;
+ left: 0;
+ -webkit-transition: 0.3s;
+ transition: 0.3s;
+ z-index: -1;
+}
+
+/* ect */
+
+.ect {
+ position: absolute;
+ top: 70%;
+ left: 20%;
+ right: 10%;
+ -webkit-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ width: 20px;
+ height: 20px;
+ cursor: pointer;
+}
+
+.ect:hover .imgMasked {
+ -webkit-clip-path: circle(400px at center);
+ clip-path: circle(400px at center);
+}
+.ect:hover .ect-hail {
+ width: 200px;
+ height: 200px;
+ border-radius: 200px;
+}
+.ect:hover .ect-hail2 {
+ width: 200px;
+ height: 200px;
+ border-radius: 200px;
+ border: 80px solid #fff4e6;
+ opacity: 0;
+}
+.ect:hover .ect-name {
+ left: 200%;
+ opacity: 1;
+}
+.ect:hover .ect-name:before {
+ width: 100%;
+}
+.ect-hail {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ -webkit-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ background-color: none;
+ width: 40px;
+ height: 40px;
+ border-radius: 40px;
+ -webkit-transition: 0.5s;
+ transition: 0.5s;
+ opacity: 0.2;
+}
+.ect-hail2 {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ -webkit-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ width: 0;
+ height: 0;
+ border-radius: 0;
+ -webkit-transition: 0.7s;
+ transition: 0.7s;
+ border: 22px solid #61a26a;
+ border-radius: 20px;
+ pointer-events: none;
+}
+.imgMasked {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ -webkit-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ top: 50%;
+ height: 200px;
+ -webkit-clip-path: circle(20px at center);
+ clip-path: circle(20px at center);
+ -webkit-transition: 0.5s;
+ transition: 0.5s;
+ pointer-events: none;
+}
+.ect-name {
+ position: absolute;
+ max-width: 600px;
+ min-width: 150px;
+ left: 0;
+ top: 150%;
+ pointer-events: none;
+ -webkit-transition: 0.5s;
+ transition: 0.5s;
+ color: none;
+ padding: 3px 6px;
+ z-index: 2;
+ opacity: 0;
+}
+.ect-name:before {
+ content: '';
+ width: 0;
+ height: 100%;
+ background-color: #61a26a;
+ position: absolute;
+ top: 0;
+ left: 0;
+ -webkit-transition: 0.3s;
+ transition: 0.3s;
+ z-index: -1;
+}
+
+/* ct */
+
+.ct {
+ position: absolute;
+ top: 70%;
+ left: 60%;
+ -webkit-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ width: 20px;
+ height: 20px;
+ cursor: pointer;
+}
+
+.ct:hover .imgMasked {
+ -webkit-clip-path: circle(400px at center);
+ clip-path: circle(400px at center);
+}
+.ct:hover .ct-hail {
+ width: 200px;
+ height: 200px;
+ border-radius: 200px;
+}
+.ct:hover .ct-hail2 {
+ width: 200px;
+ height: 200px;
+ border-radius: 200px;
+ border: 80px solid #fff4e6;
+ opacity: 0;
+}
+.ct:hover .ct-name {
+ left: 200%;
+ opacity: 1;
+}
+.ct:hover .ct-name:before {
+ width: 100%;
+}
+.ct-hail {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ -webkit-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ background-color: none;
+ width: 40px;
+ height: 40px;
+ border-radius: 40px;
+ -webkit-transition: 0.5s;
+ transition: 0.5s;
+ opacity: 0.2;
+}
+.ct-hail2 {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ -webkit-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ width: 0;
+ height: 0;
+ border-radius: 0;
+ -webkit-transition: 0.7s;
+ transition: 0.7s;
+ border: 22px solid #61a26a;
+ border-radius: 20px;
+ pointer-events: none;
+}
+.imgMasked {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ -webkit-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ top: 50%;
+ height: 200px;
+ -webkit-clip-path: circle(20px at center);
+ clip-path: circle(20px at center);
+ -webkit-transition: 0.5s;
+ transition: 0.5s;
+ pointer-events: none;
+}
+.ct-name {
+ position: absolute;
+ max-width: 600px;
+ min-width: 150px;
+ left: 0;
+ top: 150%;
+ pointer-events: none;
+ -webkit-transition: 0.5s;
+ transition: 0.5s;
+ color: none;
+ padding: 3px 6px;
+ z-index: 2;
+ opacity: 0;
+}
+.ct-name:before {
+ content: '';
+ width: 0;
+ height: 100%;
+ background-color: #61a26a;
+ position: absolute;
+ top: 0;
+ left: 0;
+ -webkit-transition: 0.3s;
+ transition: 0.3s;
+ z-index: -1;
+}
+
+/* t */
+
+.t {
+ position: absolute;
+ top: 30%;
+ left: 70%;
+ -webkit-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ width: 20px;
+ height: 20px;
+ cursor: pointer;
+}
+
+.t:hover .imgMasked {
+ -webkit-clip-path: circle(400px at center);
+ clip-path: circle(400px at center);
+}
+.t:hover .t-hail {
+ width: 200px;
+ height: 200px;
+ border-radius: 200px;
+}
+.t:hover .t-hail2 {
+ width: 200px;
+ height: 200px;
+ border-radius: 200px;
+ border: 80px solid #fff4e6;
+ opacity: 0;
+}
+.t:hover .t-name {
+ left: 200%;
+ opacity: 1;
+}
+.t:hover .t-name:before {
+ width: 100%;
+}
+.t-hail {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ -webkit-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ background-color: none;
+ width: 40px;
+ height: 40px;
+ border-radius: 40px;
+ -webkit-transition: 0.5s;
+ transition: 0.5s;
+ opacity: 0.2;
+}
+.t-hail2 {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ -webkit-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ width: 0;
+ height: 0;
+ border-radius: 0;
+ -webkit-transition: 0.7s;
+ transition: 0.7s;
+ border: 22px solid #61a26a;
+ border-radius: 20px;
+ pointer-events: none;
+}
+.imgMasked {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ -webkit-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ top: 50%;
+ height: 200px;
+ -webkit-clip-path: circle(20px at center);
+ clip-path: circle(20px at center);
+ -webkit-transition: 0.5s;
+ transition: 0.5s;
+ pointer-events: none;
+}
+.t-name {
+ position: absolute;
+ max-width: 600px;
+ min-width: 150px;
+ left: 0;
+ top: 150%;
+ pointer-events: none;
+ -webkit-transition: 0.5s;
+ transition: 0.5s;
+ color: none;
+ padding: 3px 6px;
+ z-index: 2;
+ opacity: 0;
+}
+.t-name:before {
+ content: '';
+ width: 0;
+ height: 100%;
+ background-color: #61a26a;
+ position: absolute;
+ top: 0;
+ left: 0;
+ -webkit-transition: 0.3s;
+ transition: 0.3s;
+ z-index: -1;
+}
+
+/* t2 */
+
+.t2 {
+ position: absolute;
+ top: 20%;
+ left: 50%;
+ -webkit-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ width: 20px;
+ height: 20px;
+ cursor: pointer;
+}
+
+.t2:hover .imgMasked {
+ -webkit-clip-path: circle(400px at center);
+ clip-path: circle(400px at center);
+}
+.t2:hover .t2-hail {
+ width: 200px;
+ height: 200px;
+ border-radius: 200px;
+}
+.t2:hover .t2-hail2 {
+ width: 200px;
+ height: 200px;
+ border-radius: 200px;
+ border: 80px solid #fff4e6;
+ opacity: 0;
+}
+.t2:hover .t2-name {
+ left: 200%;
+ opacity: 1;
+}
+.t2:hover .t2-name:before {
+ width: 100%;
+}
+.t2-hail {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ -webkit-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ background-color: none;
+ width: 40px;
+ height: 40px;
+ border-radius: 40px;
+ -webkit-transition: 0.5s;
+ transition: 0.5s;
+ opacity: 0.2;
+}
+.t2-hail2 {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ -webkit-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ width: 0;
+ height: 0;
+ border-radius: 0;
+ -webkit-transition: 0.7s;
+ transition: 0.7s;
+ border: 22px solid #61a26a;
+ border-radius: 20px;
+ pointer-events: none;
+}
+.imgMasked {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ -webkit-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ top: 50%;
+ height: 200px;
+ -webkit-clip-path: circle(20px at center);
+ clip-path: circle(20px at center);
+ -webkit-transition: 0.5s;
+ transition: 0.5s;
+ pointer-events: none;
+}
+.t2-name {
+ position: absolute;
+ max-width: 600px;
+ min-width: 150px;
+ left: 0;
+ top: 150%;
+ pointer-events: none;
+ -webkit-transition: 0.5s;
+ transition: 0.5s;
+ color: none;
+ padding: 3px 6px;
+ z-index: 2;
+ opacity: 0;
+}
+.t2-name:before {
+ content: '';
+ width: 0;
+ height: 100%;
+ background-color: #61a26a;
+ position: absolute;
+ top: 0;
+ left: 0;
+ -webkit-transition: 0.3s;
+ transition: 0.3s;
+ z-index: -1;
+}
\ No newline at end of file