Antworten auf deine Fragen:
Neues Thema erstellen

Texte auf verschiedenen Ebenen

femur

Noch nicht viel geschrieben

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

Nicht mehr ganz neu hier

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

Noch nicht viel geschrieben

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

Nicht mehr ganz neu hier

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.
 
Zuletzt bearbeitet:

femur

Noch nicht viel geschrieben

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

Nicht mehr ganz neu hier

Ü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

Noch nicht viel geschrieben

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
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.

Statistik des Forums

Themen
118.615
Beiträge
1.538.352
Mitglieder
67.526
Neuestes Mitglied
Winfriedtesmer
Oben