Hallo, Wolfgang, ich habe mal für dich eine dezente Hover Karte gemacht.

Ich hoffe, dass sie dir gefällt. Ich habe versucht sie so schlicht und einfach, nicht so übertrieben zu gestalten.

Ich dachte, sie passt gut zu deinem Forum Design.

Nur schade, dass ich es nicht im Xobor-Forum zum Laufen bekomme. Habe es getestet im Testforum, style normal. Nur ist alles Blau und leuchtet so wie der Rand in der Animation.

Habe schon an den CSS Tags herumgemacht, aber es wurde nur noch schlimmer.

Ich hoffe sehr, dass es dir gefällt. Es war einfach nur eine Idee und eine Inspiration. Ich dachte mir, als ich hier im Forum nachschaute, dass niemand so eine Hover Karte hat. Wollte Dir damit eine Freude machen.


So, hier mal die saubere Ansicht:
Hover Karte!


Ich möchte mich hiermit entschuldigen, dass ich es für das Xobor-Forum nicht hinbekomme.

Ich hoffe, dass meine Inspiration gut ankommt.

Mit freundlichen Grüßen

Daishi

Sehr hübsch. Bewundere hier deine Css Fähigkeiten.

Hallo, Wolfgang ich hoffe ich nerve nicht. Mein bestelltes Netzteil ist gekommen und das habe ich jetzt eingebaut, habe extra einen mit 1000W geholt, jetzt schnurrt mein Rechner wie ein Kätzchen. Ich musste mir ein größeres Netzteil hohlen, da meine 3D-Grafikkarte alleine schon 850W braucht. So jetzt kann ich wieder flüssig arbeiten.

Ich habe jetzt nochmal ein dunkleres Design gemacht, wo innen drin ein Hover-Effekt ist. Ich habe mir jetzt dafür extra ein Tool-Tipp geschrieben, aber bekomme das nicht rein, da zerschieße ich alles. Ich habe irgendwo im Internet gesehen, dass unter einem Bild about stand, wenn man da drübergefahren ist, war es so wie ein Tooltip. Ich wollte das jetzt mal probieren und das selber machen.

Nur ist das Problem, dass das Tool-Tipp zu groß ist. Ich weiß jetzt nicht wie ich das verbinden kann. Teste auf dem PC zwar herum, aber auf CodePen habe ich mein Original gelassen. Wenn ich das jetzt verhaue, muss ich alles nochmal neu schreiben.

Das dunkle Design ist auch etwas schlicht gestaltet und beim Überfahren macht es mittig ein Hover-Effekt. Das war alles eine Idee und Inspiration, dies wollte ich ja auch wenn es fertig ist, hier präsentieren und wer es dann haben möchte, kann es dann benutzen.

Ich schreibe und bastele ja daran weiter. Ich dachte mir, ich stelle es mal halbfertig hier rein, vielleicht hast du ja auch eine Idee wie man das bewerkstelligen kann. Es kann ja jeder seine Idee dazugeben.

Hier das dunkle Design mit dem inneren Hover-Effekt.

Das dunkle Design mit dem inneren Hover-Effekt!


Hier der HTML Code:

1
2
 

<div class="mwindow">Wolfgang
<center><img class="rund2" src="https://files.homepagemodules.de/b104774/avatar-e1e3f372-1.gif" width="60px"></center></div>  
 

Schließen

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 

html,body{
  background-color:#000;
}
.mwindow{
  width:256px;
  height:256px;
  background-color:#333;
  border-radius:8px;
  margin:8px auto;
  border:4px solid #222;
  box-shadow:-3px -4px 5px -4px #fff inset,
    -3px -4px 5px -4px #fff,
    0px -16px 32px 32px #000 inset,
    0px 0px 128px 1px #000 inset;
  color:transparent;
  text-align:center;
  line-height:92px;
  font-family:sans-serif;
  font-weight:bold;
  font-size:0.8em;
  text-shadow:0px 0px 2px #777,
    0px -1px 4px #000,
    0px -2px 4px #000,
    0px -3px 4px #000;
  transition:all 2s ease-in-out;
}
.mwindow:hover{
  text-shadow:0px 0px 0px #777,
    0px -1px 1px #000,
    0px -2px 1px #000,
    0px -3px 1px #000;
  box-shadow:-3px -4px 5px -4px #fff inset,
    -3px -4px 5px -4px #fff,
    0px 0px 32px 8px #000 inset;  
  font-size:1.15em;
}
.rund2 {
  border-radius: 120%;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  }  
 

Schließen

1
2
3
4
5
 

  <div>
  <h3 class="tool" data-tip="Hier bekommt man immer hilfe und der admin ist sehr nett und Hilfsbereit!">
    Treffpunkt für Hilfe, Tricks & Tipps!
  </h3>
</div>  
 

Schließen

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
 

html {
  background-color: #141414;
}
 
html, body, div {
  height: 100%;
}
 
div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
 
img {
  width: 200px;
  height: 200px;
}
 
h3 {
  color: #DDDDDD;
}
 
.tool {
  cursor: help;
  position: relative;
}
 
.tool::before,
.tool::after {
  position: absolute;
  left: 50%;
  opacity: 0;
  z-index: -100;
}
 
.tool:hover::before,
.tool:focus::before,
.tool:hover::after,
.tool:focus::after {
  opacity: 1;
  z-index: 100;
}
 
.tool::before {
  border-style: solid;
  border-width: 1em 0.75em 0 0.75em;
  border-color: #3e474f transparent transparent transparent;
  bottom: 100%;
  margin-left: -0.5em;
  content: "";
}
 
.tool::after {
  background: #3e474f;
  border-radius: 0.25em;
  bottom: 180%;
  color: #edeff0;
  padding: 1em;
  margin-left: -8.75em;
  content: attr(data-tip);
}  
 

Schließen

So, ich habe weitergearbeitet und geschrieben. Ich finde, so sieht es schon gut aus. Hatte mal eine Pause gemacht und etwas gegessen und 1 Kanne Kaffee getrunken und dabei überlegt, wie ich das so hinbekomme.

Musste im Internet für das Bild extra schauen, wie ich die Bildgröße per CSS-Code ändern kann. Also nicht wundern, wenn es in der CSS so chaotisch und nicht ordentlich aussieht. Bin froh, so wie ich es haben wollte, ist es jetzt.

Ich habe meinen CSS-Codes für die Tool-Tipps hinbekommen, ich kam ganz schön ins schwitzen. Ich hatte es ein paar Mal zerschossen. Bin froh, dass ich es so weit hinbekommen habe, für mich passt es jetzt.

Den Tooltip Text habe ich so gelassen. Kann man ja ändern.

Ich hatte ganz schön zu tun, habe aber meine Idee und Inspiration und Fantasy hinbekommen und mit Mühe, Angst und schwitzen hinbekommen.

Ich danke dir @Wolfgang für deinem Rat, wenn ich es nicht sofort hinbekomme, eine Pause zu machen. Ich rauche eine Zigarette. trinke Kaffee und denke in Ruhe nochmal nach und denke an die oberste Regel, setze dich nicht so unter Druck.

Das hat mir geholfen, ich setze mich selber immer unter Druck, will es ja auch hinbekommen. Wie man sieht, helfen alle deine Ratschläge.

So, hier sieht man das fertige dunkle Design:
Das dunkle Design mit dem inneren Hover-Effekt !


Hier der HTML Code:

1
2
3
4
5
6
7
 

  
<div class="mwindow">Wolfgang<br><img class="rund2" src="https://files.homepagemodules.de/b104774/avatar-e1e3f372-1.gif" width="100px"> Administrator
  
</div>
<center><h3 class="tool" data-tip="Hier bekommt man immer hilfe und der admin ist sehr nett und Hilfsbereit!">
    Treffpunkt für Hilfe, Tricks & Tipps!
  </h3></center>  
 

Schließen

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
 

  html,body{
  background-color:#000;
}
.mwindow{
  width:256px;
  height:256px;
  background-color:#333;
  border-radius:8px;
  margin:8px auto;
  border:4px solid #222;
  box-shadow:-3px -4px 5px -4px #fff inset,
    -3px -4px 5px -4px #fff,
    0px -16px 32px 32px #000 inset,
    0px 0px 128px 1px #000 inset;
  color:transparent;
  text-align:center;
  line-height:92px;
  font-family:sans-serif;
  font-weight:bold;
  font-size:0.8em;
  text-shadow:0px 0px 2px #777,
    0px -1px 4px #000,
    0px -2px 4px #000,
    0px -3px 4px #000;
  transition:all 2s ease-in-out;
}
.mwindow:hover{
  text-shadow:0px 0px 0px #777,
    0px -1px 1px #000,
    0px -2px 1px #000,
    0px -3px 1px #000;
  box-shadow:-3px -4px 5px -4px #fff inset,
    -3px -4px 5px -4px #fff,
    0px 0px 32px 8px #000 inset;  
  font-size:1.15em;
}
.rund2 {
  border-radius: 140%;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  }
div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
 
img {
  width: 110px;
  height: 110px;
}
 
h3 {
  color: #DDDDDD;
}
 
.tool {
  cursor: help;
  position: relative;
}
 
.tool::before,
.tool::after {
  position: absolute;
  left: 50%;
  opacity: 0;
  z-index: -100;
}
 
.tool:hover::before,
.tool:focus::before,
.tool:hover::after,
.tool:focus::after {
  opacity: 1;
  z-index: 100;
}
 
.tool::before {
  border-style: solid;
  border-width: 1em 0.75em 0 0.75em;
  border-color: #3e474f transparent transparent transparent;
  bottom: 100%;
  margin-left: -0.5em;
  content: "";
}
 
.tool::after {
  background: #3e474f;
  border-radius: 0.25em;
  bottom: 180%;
  color: #edeff0;
  padding: 1em;
  margin-left: -8.75em;
  content: attr(data-tip);
}  
 

Schließen

Erst mal danke für das Lob aus Beitrag #2 und Beitrag #4. Ich finde das ich selbst nicht so gut bin, ich schaue immer im Internet nach wie und was man alles mit der CSS machen kann.

Wie ich schon erwähnt habe, ist CSS eine sehr mächtige Sprache, damit kann man echt sehr viel tun, allerdings findet man auf den deutschen Seiten von CSS arg wenig.

Ich schaue mehr auf den amerikanischen und mexikanischen Seiten mit CSS-Tipps und Anleitungen an. Da sind Aufgaben, die man selbst lösen muss. Ich finde sowas echt sehr gut, wenn ich etwas nicht weiß schaue ich nach.

Ich bin ja mit meinen Arbeiten soweit zufrieden und mit CodePen auch. Habe mich da sehr gut eingearbeitet, ich habe auch andere Programme ausprobiert, wo man HTML und CSS und Javascript schreiben kann, komme mit denen nicht klar. Dann hatte ich CodePen ausprobiert, einfach genial. Es zeigt alles live an, was man machst, einfach top. Bei den anderen Programmen musst du extra eine Webseite öffnen, um zu sehen wie es aussieht.

Was mich nur stört ist, dass ich es hier für das Xobor-Forum nicht hinbekomme. Ich habe es schon versucht, aber ich raffe das nicht.Ich gebe zu ich habe ja selber Lernschwierigkeiten, das kam ja, weil ich als 12-Jähriger einen Zeckenbiss hatte, der sich entzündete, ich sehr schwer krank wurde und eine sehr schwere Hirnhaut Entzündung hatte. Ich lag 2 Jahre im Krankenhaus, wie gesagt, ich habe ein Attest, habe kein Schulabschluss, kein Schulabgang, keine Lehre, kein Führerschein, weil ich die schriftlichen Sachen nicht schaffe.

Aber ich war handwerklich immer gut begabt. Viele sagten, dass es das nicht gibt, dass ich immer Arbeit hatte ohne Irgendwas. Ich habe immer gesagt, wer Arbeit will, bekommt auch Arbeit. Der Nachteil ist halt, man bekommt weniger Lohn. Aber ich sage mir, Hauptsache ein Dach über den Kopf, das reicht mir. Also so gesagt, ich arbeite mein Leben lang, dass es für die Miete, Strom und Nebenkosten reicht. Grob gesagt, ich gehe arbeiten nur für die Miete und Nebenkosten.

Und das mit den Skripten mache ich, weil es mir Spaß macht, es interessiert mich. Es macht auch Spaß etwas zu machen, wenn es fertig ist und funktioniert. Ich schaue mir manchmal Webseiten an oder hier im Forum und lasse mich von Wolfgang inspirieren. Er arbeitet so gut, ich sagte mir, das will ich auch, also brachte ich es mir selbst bei. Jetzt, dass ich so viel Lob bekomme, bin ich nicht gewohnt.Ich wollte jetzt nur mal so von meiner Seite aus sagen, wie ich das finde.

So ich denke, ich habe jetzt genug Information über mich preisgegeben, mit meinen Sprachfehlern, den Beschreibungen, mit der Grammatik, Erklärungen und Einschränkungen. Ehrlich gesagt habe ich wirklich ein schlechtes Gewissen, das Wolfgang meinetwegen so viel Arbeit hat, es umzuschreiben oder neu zu schreiben, dass es hier im Xobor - Forum geht.



So hier das Bild. Habe mal an meiner Hover-Karte herumgeschraubt. Ich finde es so weit passend für mich.

Hier das Bild:



Hier die Codes, HTML und CSS

Der HTML Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 

<br />
<div class="hover_card">
  <div class="card2">
    <div class="txt2">
 
      <a title="Zum Profil" href="https://www.black-angels-club.org/u1_Enrico.html">
        <img class="rund2" src="https://files.homepagemodules.de/b906480/avatar-76b967fa-1.png" width="90px">
      </a>
 
      <div>Enrico</div>
 
      <p class="hover_effekt">Admin</p><p class="hover_effekt"></p>
 
      <a title="Zur Startseite" class="hover_effekt" href="/" target="_blank">Black - Angel´s - Club!</a>
    </div>
  </div>
</div>
<br />
 

Schließen

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
 

/* HoverCard_Enrico */
.hover_card {
   display: grid;
   place-items:center;
   width:200px;
   aspect-ratio:0.7;
   /* Äußerer Randeffekt, mehrerer Farben hier angeben */
   background:linear-gradient(50deg,#fff,#000,#fff,#000,#fff,#000,#fff,#000,#fff,#000,#fff,#000);
   position: relative;
   border-radius:5%;
   overflow: hidden;
   margin:10px;
   padding:3px;
   z-index:999999;
}
.hover_card:hover::before {
   animation: effekt2 3s infinite ;
}
 
.rund2 {
   border-radius: 50%;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   border:5px double transparent;
 }
.rund2:hover {
   border:5px double #aaaaaa;
}
 
.hover_card::before {
   content:'';
    /* Äußerer Randeffekt,  Laufeffekt der Farben hier angeben */
   background: linear-gradient(45deg,gold,white,gold,white,gold,white,gold,white,gold,white,gold,white);
   width:500px;
   height:20px;
   position: absolute;
   transform: rotate(-52deg) translate(0,-180px); 
}
.card2 {
   display: grid;
   place-items: center;
   width:100%;
   aspect-ratio:0.7;
   border-radius:5%;
   background-color:#323232;
   color:#858585;
   position:relative;
}
.hover_card:hover .card2, a.hover_effekt:hover {
   text-decoration:none !important;
   color:#ffffff;
}
 
.txt2 {
   text-align:center;
   transition: color 0.5s ease;
}
.txt2 div {
   font: 25px "Pristina", Times;
   font-weight: bold;
   letter-spacing: 7px;
}
.hover_card:hover .txt2 p::before {
   transform:scaleX(1);
}
 
a.hover_effekt { 
   font: 14px "Arial", Times;
   text-decoration:none !important;
   text-align:center !important;
   color:#aaaaff;
}
p.hover_effekt {  
   display: grid;
   grid-template-rows:0px;
   align-items: center;
   gap: 10px;
   margin: 10px auto !important;
   font:16px "Arial", Times;
}
p.hover_effekt::before {
  content:"";
  display:inline-block;
  width:100%;
  height:3px;
  /* Innerer Balkeneffekt ober- und unterhalb der Schrift "Admin", Farben hier angeben */
  background:linear-gradient(45deg,#fff,#000,#fff,#000,#fff,#000,#fff,#000,#fff,#000,#fff,#000);
  transform:scaleX(0);
  transition: transform 4s ease;
}
 
@keyframes effekt2 {
  50%{ transform: rotate(-52deg) translate(0,180px)}
}
 

Schließen