<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/jthiller/pen/icDtL?depth=everything&limit=all&order=popularity&page=82&q=image&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
<style class="cp-pen-styles">html {
margin: 0;
padding: 0;
background-color: #48658B;
color: #e2e8f0;
font-family: 'Source Sans Pro', sans-serif;
}
h1,
h2,
p {
margin: 0;
color: #e2e8f0;
text-align: center;
font-weight: 200;
}
h1 {
padding: .25em;
font-size: 2.5em;
}
h2 {
padding: .125em;
font-size: 1.125em;
}
p {
padding: .5em;
font-size: .75rem;
}
::-moz-selection {
background: rgba(255, 255, 255, 0.5);
text-shadow: none;
}
::selection {
background: rgba(255, 255, 255, 0.5);
text-shadow: none;
}
.wrapper {
margin: 0 auto;
padding: 2em 0;
max-width: 39rem;
border: 1px solid #e2e8f0;
border-top: none;
box-shadow: 0 0 1px 0 #9fb3cd;
}
.icons {
margin: 3rem 0 1rem 0;
}
.box {
position: relative;
display: inline-block;
margin: 2.5em;
padding: 1em;
width: .5rem;
height: .5rem;
border: 1px solid #9fb3cd;
background: #4d6c95;
vertical-align: top;
cursor: pointer;
-webkit-transition: background .3s ease, border .3s ease;
transition: background .3s ease, border .3s ease;
}
.box:hover {
border: 1px solid #d1dbe7;
background: #52749f;
}
.box div {
font-size: 150%;
}
.box div div {
font-size: inherit;
}
.plusDrop {
margin: 0 auto;
width: 0;
height: 0;
border-radius: 100%;
border-bottom-left-radius: 0;
background-color: transparent;
-webkit-transform: rotate(-45deg) translate3d(0, 1em, 0);
transform: rotate(-45deg) translate3d(0, 1em, 0);
-webkit-animation-name: wag;
animation-name: wag;
-webkit-animation-duration: 0.75s;
animation-duration: 0.75s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
}
.plusDrop:before {
position: relative;
top: -2em;
display: block;
box-sizing: border-box;
margin: 0 auto;
width: 2em;
height: 2em;
border: 0.2em solid white;
border-radius: 100%;
border-bottom-left-radius: 0;
content: "";
}
.plusDrop:after {
position: relative;
display: block;
width: 1em;
height: 1em;
color: white;
content: '\00D7';
font-size: 2.5em;
opacity: 1;
-webkit-transition: all .2s ease;
transition: all .2s ease;
-webkit-transform: translate3d(0.15em, -1.85em, 0);
transform: translate3d(0.15em, -1.85em, 0);
-webkit-transform-origin: center;
transform-origin: center;
}
.plusDrop:hover, .plusDrop:focus {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
.plusDrop:hover:before, .plusDrop:focus:before {
background: rgba(255, 255, 255, 0.3);
}
.plusDrop:hover:after, .plusDrop:focus:after {
opacity: 0;
}
@-webkit-keyframes wag {
from {
-webkit-transform: rotateZ(-54deg);
transform: rotateZ(-54deg);
}
to {
-webkit-transform: rotateZ(-36deg);
transform: rotateZ(-36deg);
}
}
@keyframes wag {
from {
-webkit-transform: rotateZ(-54deg);
transform: rotateZ(-54deg);
}
to {
-webkit-transform: rotateZ(-36deg);
transform: rotateZ(-36deg);
}
}
.circlePulse {
position: relative;
margin: 0 auto;
padding: 0;
width: 0;
height: 0;
}
.circlePulse:before {
position: relative;
top: -.8em;
left: -1em;
display: block;
box-sizing: border-box;
margin: 0 auto;
width: 2em;
height: 2em;
border: 0.5em solid white;
border-radius: 100%;
content: "";
-webkit-transform-origin: center;
transform-origin: center;
-webkit-animation-name: inOut;
animation-name: inOut;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
}
.circlePulse:after {
position: absolute;
top: -.8em;
left: -1em;
display: block;
box-sizing: border-box;
margin: 0 auto;
width: 2em;
height: 2em;
border: 0.2em solid white;
border-radius: 100%;
content: "";
-webkit-transform-origin: center;
transform-origin: center;
-webkit-animation-name: inOut;
animation-name: inOut;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease;
animation-timing-function: ease;
-webkit-animation-delay: -.5s;
animation-delay: -.5s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
}
@-webkit-keyframes inOut {
from {
-webkit-transform: scale(0);
transform: scale(0);
}
to {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes inOut {
from {
-webkit-transform: scale(0);
transform: scale(0);
}
to {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.circleOut {
position: relative;
margin: 0 auto;
padding: 0;
width: 0;
height: 0;
}
.circleOut:before {
position: relative;
top: -.8em;
left: -1em;
display: block;
box-sizing: border-box;
margin: 0 auto;
width: 2em;
height: 2em;
border: 0.5em solid white;
border-radius: 100%;
content: "";
-webkit-transform-origin: center;
transform-origin: center;
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-delay: -1s;
animation-delay: -1s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: forwards;
animation-direction: forwards;
}
.circleOut:after {
position: absolute;
top: -.8em;
left: -1em;
display: block;
box-sizing: border-box;
margin: 0 auto;
width: 2em;
height: 2em;
border: 0.2em solid white;
border-radius: 100%;
content: "";
-webkit-transform-origin: center;
transform-origin: center;
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease;
animation-timing-function: ease;
-webkit-animation-delay: -.5s;
animation-delay: -.5s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: forwards;
animation-direction: forwards;
}
@-webkit-keyframes fadeOut {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
50% {
opacity: 1;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0;
}
}
@keyframes fadeOut {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
50% {
opacity: 1;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0;
}
}
.bounceDrop {
position: relative;
margin: 0 auto;
width: 0;
height: 0;
border-radius: 100%;
border-bottom-left-radius: 0;
background-color: transparent;
}
.bounceDrop:before {
position: relative;
top: -2.5em;
left: -1em;
display: block;
box-sizing: border-box;
margin: 0 auto;
width: 2em;
height: 2em;
border: 0.2em solid white;
border-radius: 100%;
border-bottom-left-radius: 0;
content: "";
-webkit-transform: rotate(-45deg) translate3d(0, 1em, 0);
transform: rotate(-45deg) translate3d(0, 1em, 0);
-webkit-animation-name: bounce;
animation-name: bounce;
-webkit-animation-duration: .75s;
animation-duration: .75s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
}
.bounceDrop:after {
position: relative;
top: -2.5em;
left: -.75em;
display: block;
width: 1.5em;
height: 1em;
border-radius: 100%;
background: rgba(255, 255, 255, 0.5);
content: "";
-webkit-animation-name: bounceShadow;
animation-name: bounceShadow;
-webkit-animation-duration: .75s;
animation-duration: .75s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
}
@-webkit-keyframes bounce {
0% {
-webkit-transform: translateY(-0.25em) rotate(-45deg);
transform: translateY(-0.25em) rotate(-45deg);
}
50% {
-webkit-transform: translateY(-0.5em) rotate(-45deg);
transform: translateY(-0.5em) rotate(-45deg);
}
100% {
-webkit-transform: translateY(0) rotate(-45deg);
transform: translateY(0) rotate(-45deg);
}
}
@keyframes bounce {
0% {
-webkit-transform: translateY(-0.25em) rotate(-45deg);
transform: translateY(-0.25em) rotate(-45deg);
}
50% {
-webkit-transform: translateY(-0.5em) rotate(-45deg);
transform: translateY(-0.5em) rotate(-45deg);
}
100% {
-webkit-transform: translateY(0) rotate(-45deg);
transform: translateY(0) rotate(-45deg);
}
}
@-webkit-keyframes bounceShadow {
0% {
opacity: .75;
-webkit-transform: scale(0.75);
transform: scale(0.75);
}
50% {
opacity: .5;
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
100% {
opacity: 1;
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
}
@keyframes bounceShadow {
0% {
opacity: .75;
-webkit-transform: scale(0.75);
transform: scale(0.75);
}
50% {
opacity: .5;
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
100% {
opacity: 1;
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
}
.scope {
position: relative;
margin: 0 auto;
width: 0;
height: 0;
border-radius: 100%;
border-bottom-left-radius: 0;
background-color: transparent;
font-size: 180% !important;
}
.scope .glass {
height: 1em;
width: 1em;
top: -.5em;
left: -.65em;
border: 0.2em solid white;
border-radius: 100%;
position: relative;
-webkit-animation-name: zoom;
animation-name: zoom;
-webkit-animation-duration: .75s;
animation-duration: .75s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
-webkit-transform-origin: .5em .5em;
transform-origin: .5em .5em;
}
.scope .glass:before {
height: .25em;
width: 1em;
top: .75em;
left: .75em;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
content: "";
background: white;
display: block;
position: relative;
}
.scope .glass:after {
position: relative;
display: block;
top: -.33em;
left: -.16em;
width: 1em;
height: 1em;
color: white;
text-align: center;
content: "+";
font-size: 1.5em;
line-height: 1em;
opacity: 1;
-webkit-transition: all .2s ease;
transition: all .2s ease;
-webkit-animation-name: zoomPlus;
animation-name: zoomPlus;
-webkit-animation-duration: .75s;
animation-duration: .75s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
}
@-webkit-keyframes zoom {
0% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
50% {
-webkit-transform: scale(0.85);
transform: scale(0.85);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes zoom {
0% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
50% {
-webkit-transform: scale(0.85);
transform: scale(0.85);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes zoomPlus {
0% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
50% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
100% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
}
@keyframes zoomPlus {
0% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
50% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
100% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
}
.demo {
position: relative;
margin: 2rem auto;
padding: 0;
max-width: 39rem;
border: 1px solid #9fb3cd;
}
.demo .plusDrop,
.demo .circlePulse,
.demo .circleOut,
.demo .bounceDrop,
.demo .scope,
.demo .arrowDrop {
position: absolute;
top: 9.3rem;
left: 17.8rem;
}
.demo .plusDrop:before,
.demo .circlePulse:before,
.demo .circleOut:before,
.demo .bounceDrop:before,
.demo .scope:before,
.demo .arrowDrop:before {
border-color: #3362a0;
color: #3362a0;
}
.demo .plusDrop:after,
.demo .circlePulse:after,
.demo .circleOut:after,
.demo .bounceDrop:after,
.demo .scope:after,
.demo .arrowDrop:after {
border-color: #3362a0;
color: #3362a0;
}
.demo .plusDrop div,
.demo .circlePulse div,
.demo .circleOut div,
.demo .bounceDrop div,
.demo .scope div,
.demo .arrowDrop div {
border-color: #3362a0;
}
.demo .plusDrop div:before,
.demo .circlePulse div:before,
.demo .circleOut div:before,
.demo .bounceDrop div:before,
.demo .scope div:before,
.demo .arrowDrop div:before {
background: #3362a0;
}
.demo .plusDrop div:after,
.demo .circlePulse div:after,
.demo .circleOut div:after,
.demo .bounceDrop div:after,
.demo .scope div:after,
.demo .arrowDrop div:after {
color: #3362a0;
}
.demo .bounceDrop:after {
background: rgba(51, 98, 160, 0.8);
}
.demo img {
margin: 0;
padding: 0;
width: 39rem;
vertical-align: top;
}
</style></head><body>
<div class="wrapper">
<h1>Infopoint Icons</h1>
<h2>Fun animated icons to draw attention to areas of an image.</h2>
<p>Click to see the icons on top of the image.</p>
<div class="icons">
<div class="box">
<div class="plusDrop"></div>
</div>
<div class="box">
<div class="bounceDrop"></div>
</div>
<div class="box">
<div class="circlePulse"></div>
</div>
<div class="box">
<div class="circleOut"></div>
</div>
<div class="box">
<div class="scope">
<div class="glass"></div>
</div>
</div>
</div> <!-- /icons -->
</div> <!-- /wrapper -->
<div class="demo">
<div class="plusDrop"><div class="glass"></div></div>
<div class="plusDrop" style="left: 34em; top: 16.5em;"><div class="glass"></div></div>
<img src="https://dl.dropboxusercontent.com/u/127825508/SFGoogleMap.png" />
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script >// To toggle the points on an image
$('.box').click(function() {
var type = $(this).children('div').attr('class');
$('.demo>div').removeClass().addClass(type);
});
// Just the Webfont Loader
WebFontConfig = {
google: {
families: ["Source+Sans+Pro::latin"]
}
},
function() {
var t = document.createElement("script")
t.src = ("https:" == document.location.protocol ? "https" : "http") + "://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js", t.type = "text/javascript", t.async = "true"
var e = document.getElementsByTagName("script")[0]
e.parentNode.insertBefore(t, e)
}()
//# sourceURL=pen.js
</script>
</body></html>
