Here is a pure CSS banner for something such as a 'branch locator' with a little 3D animation of the location pin when hoverd.
Forked from Kieran's Pen Pure CSS 3D Map Banner Pin Icon.
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> | |
<link href='https://fonts.googleapis.com/css?family=Raleway:400,100,700,300' rel='stylesheet' type='text/css'> | |
<div id="map-locator"> | |
<div class="container clearfix"> | |
<div class="one_half"> | |
<h3>For Emergency </h3><br> | |
<p>Roofing Services</p> | |
<a href="sms://+17274253747?body=I%27m%20interested%20in%20your%20product.%20Please%20contact%20me." class="btn btn-primary m-3">Send SMS message</a> | |
</div> | |
<div class="one_half map-container" ontouchstart="this.classList.toggle('hover');"> | |
<div class="map-flip"> | |
<div class="front map-icon"><i class="fa fa-map-marker"></i></div> | |
<div class="back map-icon"><i class="fa fa-map-marker"></i></div> | |
</div> | |
<img src="https://storage.ning.com/topology/rest/1.0/file/get/11129814452?profile=original"> | |
</div> | |
</div> | |
</div> |
body { | |
margin:0; | |
padding:0; | |
} | |
h1 { | |
font-family:Raleway, sans-serif; | |
font-weight:normal; | |
} | |
p { | |
font-family:sans-serif; | |
color:#777; | |
font-size:14px; | |
} | |
.clearfix:after { | |
content:''; | |
clear: both; | |
display:block; | |
} | |
.container { | |
display: block; | |
max-width:1000px; | |
margin:0 auto; | |
} | |
#map-locator { | |
width:100%; | |
background:transparent; | |
margin:60px 0; | |
} | |
#map-locator button:hover { | |
background:#8d4a6d; | |
cursor:pointer; | |
} | |
#map-locator button { | |
background: #c43f3f; | |
color:#fff; | |
border:0; | |
border-radius: 0; | |
text-transform: uppercase; | |
font-size: 11px; | |
letter-spacing: 1px; | |
margin-bottom:20px; | |
padding:18px 15px; | |
} | |
#map-locator h1 { | |
color:#999; | |
line-height:0.5; | |
padding-top:25px; | |
text-transform: uppercase; | |
} | |
#map-locator img { | |
height: 200px; | |
z-index: 0; | |
} | |
.map-container { | |
position: relative; | |
perspective: 1000; | |
-webkit-perspective: 1000; | |
margin-bottom:0 !important; | |
} | |
#map-locator:hover .map-flip, | |
#map-locator.hover .map-flip { | |
transform: rotateY(180deg); | |
-webkit-transform: rotateY(180deg); | |
-moz-transform: rotateY(180deg); | |
-o-transform: rotateY(180deg); | |
} | |
.map-flip { | |
transition: 0.6s; | |
-webkit-transition: 0.6s; | |
-moz-transform: 0.6s; | |
-o-transform: 0.6s; | |
transform-style: preserve-3d; | |
-webkit-transform-style: preserve-3d; | |
-moz-transform-style: preserve-3d; | |
-o-transform-style: preserve-3d; | |
position: absolute; | |
display: inline-block; | |
top:85px; | |
left:245px; | |
text-align: center; | |
z-index:1; | |
width:50px; | |
} | |
.front.map-icon, | |
.back.map-icon { | |
backface-visibility: hidden; | |
-webkit-backface-visibility:hidden; | |
-moz-backface-visibility: preserve-3d; | |
-o-backface-visibility: preserve-3d; | |
position: absolute; | |
} | |
.front.map-icon { | |
position: absolute; | |
z-index: 9999; | |
width:50px; | |
height:40px; | |
} | |
.back.map-icon { | |
-webkit-transform: rotateY(180deg); | |
transform: rotateY(180deg); | |
-moz-transform: rotateY(180deg); | |
-o-transform: rotateY(180deg); | |
width:50px; | |
height:40px; | |
} | |
.front.map-icon i { | |
color:#c43f3f; | |
} | |
.back.map-icon i { | |
color: #8d4a6d; | |
} | |
.front.map-icon i, | |
.back.map-icon i { | |
font-size:56px; | |
top:0; | |
left:9px; | |
position: absolute; | |
} | |
.one_half { | |
width:50%; | |
float:left; | |
margin:0; | |
} |
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" /> |