Fragen und Antworten

28.10.2017 19:48

Schattenkeks
#1 Mouseover

Hallo,
ich habe mehrere Fragen zum Tema Mouseover. Ich habe schon im Supportforum und generell im Internet nach Antworten gesucht, doch es kam keine richtige Erklärung.

1. Wie lege ich fest, dass wenn man mit der Maus über das Kopfzeilenbild geht, ein Text kommt, der sich über das Bild drüber legt, es aber nicht ersetzt.

2. Ich weiß, wie ich eine Farbe festlege, in der ein Link angezeigt wird, wenn man mit der Maus über ihn fährt. Doch wie stelle ich ein, dass ein Link zum Beispiel größer wird oder, einen leichten Schatten wirft?

3. Jetzt nochmal ein anderes Thema: Wie kann ich das "Scroll design" veränden? Bei mir sieht es normal so aus (links) und ich würde es gerne umdesignen dass es z.b. wie bei rechts aussieht.

Schon mal im Voraus danke für eure Hilfe!

Antworten

Beitrag melden

#2

29.10.2017 12:18 (zuletzt bearbeitet: 29.10.2017 12:19)

( gel�scht )
#2 RE: Mouseover

Gast

( gel�scht )

zu 1.: habe ich gerade keine Antwort parat

zu 2.:

1
2
 
a:hover {font-size: 20px;
text-shadow: 3px 3px 3px #000000;}
 

zu 3.: gab es letztens mal einen Thread →> hier !

MfG

Antworten

Beitrag melden

#3

30.10.2017 05:14 (zuletzt bearbeitet: 30.10.2017 05:14)

Tinette Lath�e ( gel�scht )
#3 RE: Mouseover

Ti

Tinette Lath�e ( gel�scht )

Zitat von Schattenkeks im Beitrag #1
1. Wie lege ich fest, dass wenn man mit der Maus über das Kopfzeilenbild geht, ein Text kommt, der sich über das Bild drüber legt, es aber nicht ersetzt.

Das ist mit CSS3 möglich:

Das ins CSS eintragen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
.container {
position:relative;
overflow:hidden;
}
.container .textbox {
width:200px;
height:150px;
position:absolute;
top:0;
left:0;
margin-top:-160px;
border-radius:5px;
background-color: rgba(0,0,0,0.75);
-webkit-box-shadow: inset 0px 0px 5px 2px rgba(255,255,255,.75);
box-shadow: inset 0px 0px 5px 2px rgba(255,255,255,.75);
}
.container:hover .textbox {
margin-top:0;
}
.text {
padding-top: 50px;
}
.textbox {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
 
 

Und HTML (da dann auch den Text einfügen):

1
2
3
4
5
6
 
<div class="container">
<img src="" alt="">
<div class="textbox">
<p class="text">TEXT</p>
</div>
</div>
 

Antworten

Beitrag melden

#4

21.01.2018 19:15

Schattenkeks
#4 RE: Mouseover

Schattenkeks

Nun möchte ich eine Tabelle als Text über dem Bild haben, und normaler Text funktioniert auch, aber sobald ich ein Tabelle (Ich habe es mit dem Code der dreispaltigen Tabelle, der hier gezeigt wurde probiert) anlege, wird diese unter das Bild versetzt, doch ich möchte sie über dem Bild haben.

Antworten

Beitrag melden

#5

23.01.2018 21:17

Schattenkeks
#5 Tabelle erscheint auf dem Kopfzeilenbild beim überfahren der Maus

Schattenkeks

Ich habe es hinbekommen, dass die Tabelle mit in den div kommt, der erscheint, wenn man mit der Maus über das Kopfzeilenbild fährt, indem ich statt <p class="text"> - <p class="Table"> hingeschrieben habe. Dies hat auch funktioniert, jedoch habe ich jetzt das Problem, dass die Tabelle im div, sobald ich die obere überflüssige Tabelle lösche, unter das Kopfzeilenbild springt und dort durchgängig angezeigt wird. Also funktioniert es nur, wenn ich dieselbe Tabelle noch einmal über den Kopfzeilenbild habe, doch wie kann ich dies beheben, sodass ich sie nicht mehr brauche?