mycosystems/myco.systems
3
0
Fork 0
Code Pull requests Activity Actions

added styles for ping hover effect

Browse source
This commit is contained in:
rouce 2023-10-15 16:28:14 -04:00
parent 8d04425019
commit 0c07656e8c
1 changed files with 46 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
public/style.css
View file

@ -276,4 +276,49 @@ button {
padding: 4px;
border-radius: 4px;
font-size: 14px;
z-index: 99;
}
# ping
.ping1,
.ping2,
.ping3{position:absolute;z-index:88;left:50%;top:50%;display:block;content:"";-webkit-border-radius:116px;-moz-border-radius:116px;border-radius:116px;border:2px solid #ee4633;
transition:all 0.2s ease-in-out;
-webkit-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
width:0;
height:0;
margin-left:-2px;
margin-top:-2px;}
.dot:hover .ping1,
.dot:hover .ping2,
.dot:hover .ping3 {
transition:all 0.75s ease-out;
-webkit-transition:all 0.75s ease-out;
-moz-transition:all 0.75s ease-out;
-o-transition:all 0.75s ease-out;
}
.dot:hover .ping1 { width:116px;height:116px; margin-left:-60px;margin-top:-60px; }
.dot:hover .ping2{width:66px;height:66px;margin-left:-35px;margin-top:-35px;
-moz-transition-delay:0.2s;
-webkit-transition-delay:0.2s;
-o-transition-delay:0.2s;
transition-delay:0.2s;}
.dot:hover .ping3{width:40px;height:40px;margin-left:-22px;margin-top:-22px;
-moz-transition-delay:0.5s;
-webkit-transition-delay:0.5s;
-o-transition-delay:0.5s;
transition-delay:0.5s;}
.dot{position:absolute;z-index:99;width:14px;height:14px;background:#ee4633;-webkit-border-radius:12px;-moz-border-radius:12px;border-radius:12px;cursor:pointer;}
#map{position:relative;margin:5% auto;width:638px;}
#portland{left:33px;top:50px;}
#palo_alto{left:17px;top:181px;}
#scottsdale {left:115px;top:246px;}
#san_antonio{left:296px;top:311px;}