<!DOCTYPE html>
<html lang="de-DE">
<head>
<meta charset="UTF-8">
<title>Scale Text</title>
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.js"></script>
<![endif]-->
<link rel="stylesheet" href="styles.css">
<link href='http://fonts.googleapis.com/css?family=Maven+Pro' rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
#textScale{
width: 500px;
border: 1px solid black;
height: 300px;
position: relative;
font-family: 'Maven Pro', sans-serif;
margin: auto;
}
#textScale a, #textScale p{
position: absolute;
text-decoration: none;
color: black;
transition: transform 3s;
}
#textScale a:hover{
-ms-transform: scale(1.5,1.5); /* IE 9 */
-webkit-transform: scale(1.5,1.5); /* Safari */
-o-transform: scale(1.5,1.5); /* Opera */
transform: scale(1.5,1.5);
color: orange;
}
.first{ font-size: 300%; top: 5%; left: 20%;}
.second{ font-size: 200%; top: 15%; right: 20%;}
.third{ font-size: 150%; bottom: 40%; left: 15%;}
.fourth{ font-size: 200%; bottom: 35%; right: 30%;}
.fifth{ font-size: 200%; bottom: 15%; left: 10%;}
.sixth{ font-size: 200%; bottom: 20%; right: 10%;}
.textScaleCenter{
margin: 0 auto;
font-size: 180%;
bottom: 55%;
left: 8%;
font-weight: bold;
}
</style>
</head>
<body>
<header></header>
<nav></nav>
<section>
<div id="textScale">
<a href="#" class="first">Ideen</a>
<a href="#" class="second">Zeit</a>
<p class="textScaleCenter">Jeder kann Flüchtlingen helfen</p>
<a href="#" class="third">Geld</a>
<a href="#" class="fourth">Sprachen</a>
<a href="#" class="fifth">Sachspenden</a>
<a href="#" class="sixth">Wohnraum</a>
</div>
</section>
<footer></footer>
</body>
</html>