Last Updated: February 25, 2016
·
1.797K
· hollymwallace

Pure CSS Map

#css
#html
 
<html>
<head>
<style>
@import url(‘map_usa.css’);

@-webkit-keyframes cssAnimation {
from { -webkit-transform: rotate(0deg) scale(0.1) skew(1deg) translate(0px); }
to { -webkit-transform: rotate(0deg) scale(1.0) skew(1deg) translate(0px); }
}
@-moz-keyframes cssAnimation {
from { -moz-transform: rotate(0deg) scale(0.1) skew(1deg) translate(0px); }
to { -moz-transform: rotate(0deg) scale(1.0) skew(1deg) translate(0px); }
}
@-o-keyframes cssAnimation {
from { -o-transform: rotate(0deg) scale(0.1) skew(1deg) translate(0px); }
to { -o-transform: rotate(0deg) scale(1.0) skew(1deg) translate(0px); }
}

@font-face {
font-family: ‘hamburgerheavenregular’;
src: url(‘../fonts/hambh__-webfont.eot’);
src: url(‘../fonts/hambh__-webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘../fonts/hambh__-webfont.woff’) format(‘woff’),
url(‘../fonts/hambh__-webfont.ttf’) format(‘truetype’),
url(‘../fonts/hambh__-webfont.svg#hamburgerheavenregular’) format(‘svg’);
font-weight: normal;
font-style: normal;

}

#header{
height: 140px;
width: 1050px;
margin-right: auto;
margin-left: auto;

}

#header h1{
font-family: hamburgerheavenregular, sans-serif;
font-size: 96px;
line-height:18px;
}

#mapBox{
background-image: url(../images/map.gif);
background-size:100%;
background-repeat:no-repeat;
height: 603px;
width: 984px;
margin-top: -60px;
margin-right: auto;
margin-left: auto;
border: medium dashed #FFF;
}

a{
display:block;
height: 50px;
width: 50px;
background-image: url(../images/star.png);
background-size:70%;
background-repeat:no-repeat;
transition:All 1.2756s ease;
-webkit-transition:All 1.2756s ease;
-moz-transition:All 1.2756s ease;
-o-transition:All 1.2756s ease;
transform: rotate(0deg) scale(0.5) skew(1deg) translate(0px);
-webkit-transform: rotate(0deg) scale(0.5) skew(1deg) translate(0px);
-moz-transform: rotate(0deg) scale(0.5) skew(1deg) translate(0px);
-o-transform: rotate(0deg) scale(0.5) skew(1deg) translate(0px);
-ms-transform: rotate(0deg) scale(0.5) skew(1deg) translate(0px);

}

a:hover{
transform: rotate(0deg) scale(1.0) skew(1deg) translate(0px);
-webkit-transform: rotate(0deg) scale(1.0) skew(1deg) translate(0px);
-moz-transform: rotate(0deg) scale(1.0) skew(1deg) translate(0px);
-o-transform: rotate(0deg) scale(1.0) skew(1deg) translate(0px);
-ms-transform: rotate(0deg) scale(1.0) skew(1deg) translate(0px);
}

a.close{
display:block;
height: 19px;
width: 22px;
background-image: url(../images/x.png);
background-size:70%;
margin-top: 10px;
margin-left: 205px;
margin-bottom: 20px;
}

a.close:hover{
-webkit-animation: cssAnimation 0.80828s  16 ease;-moz-animation: cssAnimation 0.80828s  16 ease;-o-animation: cssAnimation 0.80828s  16 ease;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-o-animation-iteration-count: 1;

}
.descript{
height: 280px;
width: 240px;
-moz-border-radius-topleft: 48px;
-moz-border-radius-topright:48px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:48px;
-webkit-border-top-left-radius:48px;
-webkit-border-top-right-radius:48px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-bottom-right-radius:48px;
border-top-left-radius:48px;
border-top-right-radius:48px;
border-bottom-left-radius:0px;
border-bottom-right-radius:48px;
-moz-box-shadow: 21px 21px 25px #666;
-webkit-box-shadow: 21px 21px 25px #666;
box-shadow: 21px 21px 25px #666;
padding: 7px;
}

.titleBox{
font-family:  hamburgerheavenregular, sans-serif;
margin-left: 15px;
margin-top: -30px;
height: 20px;
width: 250px;
font-size: 22px;
margin-bottom: 10px;
line-height: 30px;
margin-right: auto;
}

.videoBox{
height: 144px;
width: 192px;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
}

.textBox{
width: 210px;
margin-top: 10px;
margin-left: 10px;
height: 70px;
font-family: Arial, Helvetica, sans-serif;
}

/*————————————————————————-*/
.descript{
background-color: #0F5;
}
/*———————————————-*/
/*———————————————-*/
a.item_1{
margin-top: 470px;
margin-left: 440px;
width:50px;
height:50px;
}

#itemDetails_1{
display:none;
margin-top: -340px;
margin-left: 480px;
position: fixed;
}

#itemDetails_1:target{
display:block;
-webkit-animation: cssAnimation 0.3s 16 ease;
-moz-animation: cssAnimation 0.3s 16 ease;
-o-animation: cssAnimation 0.3s 16 ease;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-o-animation-iteration-count: 1;
z-index:2;
}
/*———————————————-*/

a.item_2{
margin-top: -180px;
margin-left: 275px;
width:50px;
height:50px;
}

#itemDetails_2{
display:none;
margin-top: -340px;
margin-left: 320px;
position: fixed;
}

#itemDetails_2:target{
display:block;
-webkit-animation: cssAnimation 0.3s 16 ease;
-moz-animation: cssAnimation 0.3s 16 ease;
-o-animation: cssAnimation 0.3s 16 ease;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-o-animation-iteration-count: 1;
z-index:2;
}

/*———————————————-*/
a.item_3{
margin-top: -245px;
margin-left: 580px;
width:50px;
height:50px;
}

#itemDetails_3{
display:none;
margin-top: -340px;
margin-left:620px;
position: fixed;
}

#itemDetails_3:target{
display:block;
-webkit-animation: cssAnimation 0.3s 16 ease;
-moz-animation: cssAnimation 0.3s 16 ease;
-o-animation: cssAnimation 0.3s 16 ease;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-o-animation-iteration-count: 1;
z-index:2;
}
/*———————————————-*/
a.item_4{
margin-top: 155px;
margin-left: 440px;
width:50px;
height:50px;
}

#itemDetails_4{
display:none;
margin-top: -340px;
margin-left:480px;
-webkit-margin-top: -380px;
-webkit-margin-left:510px;
position: fixed;
}

#itemDetails_4:target{
display:block;
-webkit-animation: cssAnimation 0.3s 16 ease;
-moz-animation: cssAnimation 0.3s 16 ease;
-o-animation: cssAnimation 0.3s 16 ease;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-o-animation-iteration-count: 1;
z-index:2;
}

</style>
</head>
<body>
<div id=”mapBox”><a href=”#itemDetails_1″></a>
<div id=”itemDetails_1″>
<div><a></a>
<div>Austin, Texas</div>
<div><iframe width=”128″ height=”96″ src=”http://www.youtube.com/embed/bA1ZIyeY91E” frameborder=”0″ allowfullscreen=”"></iframe></div>
<div>The capital of Texas is Austin. The state song of Texas is “Texas, Our Texas!”<br /> Add this Event to my iCal or <a href=”http://www.google.com/calendar/event?action=TEMPLATE&amp;text=Test%20Event&amp;dates=20130606T130000Z/20130606T213000Z&amp;details=This%20Panel%20where%20so%20and%20so%20explains%20all%20about%20that%20thing.&amp;location=Austin%20Convention%20Center%2C%20Panel%20Room%20213&amp;trp=false&amp;sprop=&amp;sprop=name:” target=”_blank”>Google Calendar</a></div>
</div>
</div>
<a href=”#itemDetails_2″></a>
<div id=”itemDetails_2″>
<div><a></a>
<div>Santa Fe, New Mexico</div>
<div><iframe width=”128″ height=”96″ src=”http://www.youtube.com/embed/5ai3iP6RPQY” frameborder=”0″ allowfullscreen=”"></iframe></div>
<div>The capital of New Mexico is Santa Fe. The state song of New Mexico is “O, Fair New Mexico”</div>
</div>
</div>
<a href=”#itemDetails_3″></a>
<div id=”itemDetails_3″>
<div><a></a>
<div>Madison, Wisconsin</div>
<div><iframe width=”128″ height=”96″ src=”http://www.youtube.com/embed/zOYus1BE7jk” frameborder=”0″ allowfullscreen=”"></iframe></div>
<div>The capital of Wisconsin is Madison. The state song of Wisconsin is “On, Wisconsin!”</div>
</div>
</div>
<a href=”#itemDetails_4″></a>
<div id=”itemDetails_4″>
<div><a></a>
<div>Oklahoma City, Oklahoma</div>
<div><iframe width=”128″ height=”96″ src=”http://www.youtube.com/embed/mrDVzbeDzRk” frameborder=”0″ allowfullscreen=”"></iframe></div>
<div>The capital of Oklahoma is Oklahoma City. The state song of Oklahoma is “Oklahoma!”</div>
</div>
</div>
</div>
</body>
</html>
#css
#html

Written by Holly

Say Thanks
Respond

Related protips

Total input[type=file] style control with pure CSS

294.4K
7

How to make a circular image with CSS only

243.6K
12

Centered Text And Images In Github Markdown

141.5K
1

Have a fresh tip? Share with Coderwall community!

Post
Post a tip
Best #Css Authors
oldboy
565.6K
#css
#jQuery
#CSS 3
iatek
499.2K
#css
#Javascript
#Node.js
praveenvijayan
448K
#css
#Javascript
#Python
elad2412
410.1K
#css
#cross browser compatibility
#photoshop
projectcleverweb
304.7K
#css
#javascript
#Python
Related Tags
#css
#html
Sponsored by
#native_company#
#native_desc#
#native_cta#
Filed Under
Accelerate Your Web Development Skills
Awesome Job
See All Jobs
Post a job for only $299
Thanks to our sponsor
Sponsored by #native_company# — Learn More
#native_title# #native_desc#
#native_cta#