Texte auf verschiedenen Ebenen

femur · 20.06.2015

jemand ne Idee wie ich diese Texte heir in verschiedenen DIV-Conatinern unterbrineg die in einer bestimmten Anordnung stehen und dann aber bei maus over den Linke elegant vergößern
bisher habe ich das so probiert, sieht aber nicht elegant aus

a.ex2:hover, a.ex2:active {font-size: 250%;}

Enigmon · 21.06.2015

Hallo femur,

einige Fragen:
1. Jedes Wort ist ein Link oder der Gesamttext / das Bild?
wenn ersteres:
Positionierung über flexbox, table oder position möglich
2. Sollen bei der Vergrösserung die anderen Textteile teilweise überdeckt werden??
3. Sind es immer die selben Wörter in der selben Position?? (Du sagtest was von mehreren Positionen / verschiedene Divs)

LG
Thomas

femur · 21.06.2015

jedes Wort, außer dem mittigen Satz ist ein Link

dürfen müssen aber nicht

hatte mir so vorgestellt dass bei Mouseover der Text nach vorne zoomt und bei klick der link ausgelöst wird

jetzt liegt jedes wort in einem DIV, ist aber bisher sehr unbefridigend da bei der Vergrößerung das Float left greift und alles verschiebt, ich dachte es würde sich durch die z-ebenene der Divs übereinander schieben tuts aber nicht.

gruß
Femur

Enigmon · 21.06.2015

Welche Schriftart war das nochmal?

femur · 21.06.2015

goooglefont maven pro

Enigmon · 21.06.2015

Ist sicherlich nicht das beste HTML/CSS aber es funktioniert:

HTML:

<!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>

Gruß
Thomas

Update: Habe im Quelltext als Hovereffekt die orange Schriftfarbe nachgetragen.

femur · 22.06.2015

Hallo Thomas,
man da hast Du ja ne super Lösung bebaut, so habe ich mir das vorgestellt.
DANKE!!!!! Das kann man nur noch toppen wenn sich das auch noch responsiv verhält.
das wäre super, aber dafür habe ich gar keinen Ansatzpunkt....
grübel grübel......

gruß
femur

Enigmon · 22.06.2015

Über CSS Media-Queries:

Bsp. in den <style>-Tag am Ende mit rein:

CSS:

@media only screen and (max-device-width: 600px) {
            #textScale {
                width: 300px; height: 180px; /*Verhältnis 5:3*/
                font-size: 0.6em;
            }
}
@media only screen and (min-width: 601px) and (max-width: 1024px) {
            #textScale {
                width: 500px; height: 300px; /*Verhältnis 5:3*/
                font-size: 1em;
            }
}
@media only screen and (min-width: 1025px) {
            #textScale {
                width: 800px; height: 480px;  /*Verhältnis 5:3*/
                font-size: 1.6em;
            }
}

LG
Thomas

femur · 23.06.2015

ganz so elegant habe ich es nicht gelöst, aber zufriedenstellend,
kannst ja mal schaue, ist nochnicht ganz fertig...

danke für die Unterstützung
Gruß
Femur

Enigmon · 23.06.2015

Gern geschehen..

Gruß
Thomas