<h1>Hover below</h1>
<div id="arrow"></div>
<div id="ripple"></div>
<div id="ripple2"></div>
<div id="ripple3"></div>
<div id="ripple4"></div>
<div id="img"></div>
<div id="btn">
<div><img src="http://placekitten.com/120/100" />Yay!</div>
<img src="http://placekitten.com/40/40" />
</div>
body {
overflow: hidden;
text-align: center;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
}
h1 {
z-index: 100;
text-shadow: 0 0 3px white;
opacity: 0;
}
#ripple, #ripple2, #ripple3, #ripple4 {
width: 2000px;
height: 2000px;
border-radius: 9999px;
border: 1px solid dodgerblue;
box-shadow: 0 0 20px dodgerblue;
position: absolute;
bottom: 32px;
margin-bottom: -1001px;
right: 50%;
margin-right: -1001px;
animation: shrink 8s linear infinite;
z-index: 10;
}
#ripple2 {animation-delay: 2s;}
#ripple3 {animation-delay: 4s;}
#ripple4 {animation-delay: 6s;}
@keyframes shrink {
0% {
margin-bottom: 0;
margin-right: 0;
width: 0;
height: 0;
opacity: 0;}
10% { opacity: 0.5;}
60% { opacity: 0;}
100% {
margin-bottom: -1001px;
margin-right: -1001px;
width: 2000px;
height: 2000px;
opacity: 0;}
}
#arrow {
width: 0px;
height: 0px;
border: 50px solid transparent;
border-top-color: #2f2f2f;
margin-left: -50px;
left: 50%;
position: absolute;
animation: down 2s linear infinite;
display: none;
}
@keyframes down {
0% {top: 0; opacity: 0;}
30% { opacity: 1;}
50% { opacity: 1;}
90% { opacity: 0;}
100% {top: 100%; opacity: 0;}
}
#btn {
width: 60px;
height: 45px;
position: absolute;
bottom: 10px;
right: 50%;
margin-right: -30px;
/*border: 1px solid rgba(0,0,0,0.5);*/
text-align: center;
padding-top: 5px;
border-radius: 3px;
z-index: 80;
}
#btn:hover > img {
animation: pop 0s;
}
#btn > img {
border-radius: 50px;
animation: pop 2s linear infinite;
}
@keyframes pop {
0% {transform: scale(1);}
80% {transform: scale(1);}
90% {transform: scale(1.2);}
100% {transform: scale(1);}
}
#btn > div {
width: 120px;
height: 100px;
position: absolute;
margin-left: -35px;
margin-top: -70px;
opacity: 0;
border: 1px solid black;
text-align: center;
transition: all 0.3s;
box-shadow: 0 0 10px rgba(0,0,0,0.7);
border-radius: 4px;
padding: 5px;
z-index: 99;
background: white;
text-shadow: 0 0 2px white;
font-weight: bold;
}
#btn:hover > div {
opacity: 0.9;
margin-top: -130px;
}
#btn > div img {
margin-bottom: -25px;
}
/*#img {
-webkit-filter: blur(10px);
background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/A_field_of_sagebrush_and_mount_Shasta.jpg/640px-A_field_of_sagebrush_and_mount_Shasta.jpg);
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background-size: cover;
z-index: 0;
}*/
$("#btn").mouseover(function(){
$("h1,#arrow").remove();
});
This Pen doesn't use any external CSS resources.