|
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042 |
- 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;
- }
|