CSS code hover effekt?

Hallo hat jemand einen schönen guten Hover Effekt als CSS code für ein Forum? wäre schön wenn man zb mit der maus über das forum geht und da so Sterne oder Sternschnuppen erscheinen. Oder auch andere Hover Effekt. nur raus damit :) vielen dank im Voraus!

1 Antwort

Rolajamo

29.11.2024, 14:19

Ein Forum ist ja ne komplette Seite, ein Hover wird eigentlich dazu genutzt dem User eine visuelle Rückmeldung für eine Interaktion oder Aktion mit einem spezifischen UI-Element zu geben.

Wenn du also einen geeigneten Hover suchst, solltest du etwas konkreter werden.

Sterne oder Sternschnuppen würde ich nur bei einer erfolgreichen Aktion geben, wenn man z.B. ein Rating vergeben hat.

Woher ich das weiß:Berufserfahrung – Senior UX Designer

Sternenstaub484

Beitragsersteller

29.11.2024, 14:19

Würde die Sterne gerne beim einloggen haben :)

Rolajamo

29.11.2024, 14:24

@Sternenstaub484

Die einzige Stelle an der mir das (zumindest ein bisschen) sinnvoll erscheint wäre, wenn er die Formularfelder erfolgreich ausgefüllt hat.

Denn sobald du auf "Einloggen" klickst und das Formular abgeschickt wird, wirst ja schon weitergeleitet. Da bleibt kein Platz für eine Sternanimation.

Also z.b. dass hinter dem Formularfeld bei Eingabe Sterne rausfliegen.

Sternenstaub484

Beitragsersteller

29.11.2024, 14:35

@Rolajamo

ja klingt gut, hast du so ein code?

Rolajamo

29.11.2024, 14:37

@Sternenstaub484

Kannst sowas versuchen und einfach statt dem Konfetti Sterne nehmen:

https://codepen.io/mikehobizal/pen/gOdmmr

Generell kannst dich auf Codepen umschauen, da findest bestimmt was du brauchst. Nicht 1 zu 1 aber der Code lässt sich oft einfach anpassen.

Oder frag ChatGPT, das hilft mir auch enorm.

Sternenstaub484

Beitragsersteller

29.11.2024, 14:39

@Rolajamo

danke die seite ist gut! und wie ändere ich das von confetti in Sterne? einfach Sterne hinschreiben oder wie? wenn wir chatgbt fragen, funktioniert meist nie was... leider

Rolajamo

29.11.2024, 14:41

@Sternenstaub484

Tut mir Leid aber ich kann dir jetzt nicht die Grundlagen von CSS und Javascript beibringen. Da musst du dich schon selbst einlesen.

Sternenstaub484

Beitragsersteller

29.11.2024, 14:53

@Rolajamo

okay alles klar. Und das ist der code wo confetti kommt wenn man sich neu Registriert?

Rolajamo

29.11.2024, 14:57

@Sternenstaub484

Du gibst einen Hover immer nur einem Element und wenn du mit dem Curser darüberfährst wird er ausgelöst. Das ist der Sinn eines Hovers. Welchem Element du den Hover gibst ist egal.

Alternativ könntest du noch CLick-Events hinzufügen, also wenn der Nutzer XY klickt passt Dies oder Das....

Ähnliche Beiträge

css code für profilbilder?

weiss jemand was an diesem code falsch ist, da er nicht funktioniert! Er soll die Ränder vom Profilbild rund machen, wenn man mit der maus rüber fährt.

der code ist: /* Grundlegendes Styling für das Profilbild */

.profile-container {

display: inline-block;

overflow: hidden; /* Verhindert, dass das Bild über den Container hinausgeht */

}

.profile-img {

width: 100px; /* Standardgröße des Profilbildes */

height: 100px;

object-fit: cover; /* Bild so skalieren, dass es den gesamten Container ausfüllt */

border-radius: 10px; /* Anfangs leicht abgerundete Ecken */

transition: border-radius 0.3s ease, transform 0.3s ease; /* Weicher Übergang für den Hover-Effekt */

}

/* Effekt bei Hover */

.profile-img:hover {

border-radius: 50%; /* Vollständig runde Ecken beim Hover */

transform: scale(1.05); /* Leichtes Vergrößern des Bildes */

}

...zum Beitrag

CSS Problem - wie ":hover" richtig anwenden?

Hallo,

- etwas dringend -

ich bin noch Anfängerin und möchte folgenden Effekt erreichen:

wenn ich mit der Maus über irgendeinen Bereich in der Spalte (column, s.u,.) gehe, dann sollen sich die Farben ändern: Hintergrund und p-Text (background: / color:) ist kein Problem. Aber ich habe eben auch eine Headline und einen Button da drin, deren Farben sich ebenfalls ändern müssten, da es sonst nicht mehr lesbar ist.

Ich weiß aber nicht wie ich das richtig anspreche. Einzeln hover-Effekt hinzufügen ist sinnfrei.

Mir würde es auch reichen, wenn sich z.B. einfach alle Farben in der Spalte invertieren oder irgendetwas anderes. Vielleicht ist der hover: Ansatz ja auch falsch? Google hat leider nicht geholfen bisher....

#plan .column:hover {

transform:scale(105%);

box-shadow: 0px 0px 40px rgba(0, 0, 0, .3);

background-color: #FF4772;

color: #C6EBE9;

}

So sieht es bis jetzt aus. Headline schlecht lesbar und den Button sieht man gar nicht

...zum Beitrag

[HTML/CSS] Bild wechselt, wenn man mit der Maus darüberfährt?

Hi!

Angenommen ich habe 2 Bilder.

Wenn ich auf meiner Website über ein Bild fahre, soll an der selben Stelle ein anderes Bild erscheinen. (Die Bilder sind gleich groß) Ich denke hierbei an einen Hover-Effekt, weiss aber nicht wie ich das machen soll.

Vielen Dank und LG -Florian

...zum Beitrag

Hover Effekt funktioniert nicht, warum?

Also ich habe folgendes Problem. Ich möchte, dass ein Listenelement sichtbar wird, wenn man über die komplette Liste mit dem Mauszeiger fährt. Allerdings funktioniert das einfach nicht und ich weiß nicht warum. Habe es auch schon mit display probiert und ohne der ul eine Klasse zuzuordnen. Hier mal der html-Code:

<li>Badeanzug</li>

<li>Handtuch</li>

<li>essen und trinken</li>

<li id="info2">Und natürlich Freude :D</li>

</ul>

Und das wäre jetzt der css-Code:

.effekt2:hover + #info2{

visibility: visible;

}

#info2{

visibility: hidden;

}

Ich weiß leider nicht genau was ich ändern soll und bin ziemlich planlos. Vielen Dank im Voraus für eure Hilfe^^

...zum Beitrag

Wie kann man mit CSS etwas "ausblenden"?

Ich habe mir ein Kontextmenü gebaut, dass auch Untermenüs hat:

https://jsbin.com/vaxayibeme/1/edit?html,css,output

Die Untermenüs sollen zur Benutzerfreundlichkeit mit einer Fade-Animation ein- und ausgeblendet werden, dass wenn man ein paar Millisekunden außerhalb war mit der Maus wieder rein gehen kann, um es offen zu halten.

Wenn man mit der Maus in diesem Bereich ist:

öffnen sich allerdings gleich die beiden Untermenüs Darüber/Darunter. Das ist vor allem am Handy problematisch, weil man dort nur mit Klicks steuert. So kann es leicht vorkommen, dass man versehentlich etwas einfügt, wenn man nur das Menü wegdrücken wollte (oder den Typ ändert und damit potentiell Daten löscht).

Die Einträge, die nicht aktiv sind, habe ich mit opacity: 0 ausgeblendet (weil man das mit transition animieren kann, um diesen Fade-Effekt zu bekommen). Das hat aber natürlich den Nachteil, dass es nur "unsichtbar" ist aber immer noch klickbar.

Vorher hatte ich es mit display: none versteckt, dass es auch wirklich weg ist allerdings kann man das nicht animieren, was es weniger benutzerfreundlich macht.

Hat jemand eine Idee, wie man die Untermenüs mit CSS ausblenden könnte? (muss nicht unbedingt der Fade-Effekt sein, nur irgendwie dass sie nicht mehr aus Versehen geöffnet werden können also dass man mit der Maus in dem Bereich aus Bild 2 sein kann ohne dass es geöffnet wird).

Code für alle die nicht auf JS Bin gehen wollen füge ich gleich an (ist sonst zu lang).

...zum Beitrag

Wie löse ich das Problem mit dem Bildaustausch (hover, etc.)?

Hallo,

ich versuche in CSS ein Hintergrundbild auszutauschen bei hover, active, etc.
Leider klappt es aber nicht, da bei besuchten Links dennoch das Hintergrundbild angezeigt wird, welches aber nur angezeigt werden soll, wenn der Link noch nicht geöffnet wurde.

So sieht der Code aus (body):

<div>
      <ul>
        <li><a href="xyz" class="img-link" title="xyz">xyz</a><br/></li>

Bei der Klasse in css habe ich es dann so probiert:

a.img-link{
  display: inline-block;
  background: url(../img/li-button-blue.png);
  margin: 0 auto;
  text-align: center;
}
a.img-link:visited {
  background: url(../img/li-button-yellow.png);
}
a.img-link:hover {
  background: url(../img/li-button-red.png);
}
a.img-link:active {
  background: url(../img/li-button-lightblue.png);
}
a.img-link:focus {
  background: url(../img/li-button-green.png);

Vielleicht kann ja jemand helfen, ist wahrscheinlich total einfach.

Vielen Dank.

...zum Beitrag

Beste AI zum Programmieren?

Hallo

Kennt von euch jemand eine AI welche gut zum Programmieren ist? Ich benötige eine AI welche mithilfe eines Bildes zb mit ein CSS code ausgeben kann mit welchem ich meine Webseite so gestalten kann sodass ws gleich wie auf dem Bild aussieht.

...zum Beitrag

CSS bei Hover anderes Element verändern?

Ganz ohne JavaScript

Mit dem Code unten kann ich beim hovern auf container1 die Hintergrundfarbe von container2 ändern weil er in container1 drinnen ist

aber geht es nicht auch so das ich den Body Hintergrund auf grün oder so ändern kann ?

    #container1{
            height: 50vh;
            background-color: blue;
        }
        #container2{
            height: 25vh;
            width: 100%;
            background-color: red;
        }
        #container1:hover #container2{
            background-color: green;
        }
    <div id="container1">
            <div id="container2"></div>
    </div>

...zum Beitrag

Wie mache ich mit diesem Code einen Zoom-In Effekt?

Guten Tag,

ich programmiere meine eigene Website und möchte nun einen Zoom-In Effekt für ein Bild einfügen. Hierfür möchte ich nur CSS benutzen. Schlussendlich sollte es so aussehen: https://w3bits.com/labs/css-image-hover-zoom/ Wenn ich den Code im CSS einfüge, vergrössert es das Bild einfach nur. Ich habe es wohl falsch angesprochen in CSS? Wie müsste daher der richtige Code aussehen, damit es funktioniert? Danke im Voraus für eure Hilfe!

...zum Beitrag

HTML CSS Hover Animation?

Hallo. Ich versuche eine eigene Website zu erstellen mit HTML und CSS. Nun bin ich auf ein Problem gestoßen. Ich versuche seit langem eine Hover Animation auf ein Text einzufügen. Den CSS Code habe ich von der Webseite ui-snippets.dev . Ich bekomme die Hover Animation nicht zum Funktionieren. Die Animation kommt nur wenn ich beim content ein Text eingebe. Dann ist aber die Animation viel zu groß, da die große vom eingegeben Content Text benutz wird.

Bilder vom Code im Anhang.

...zum Beitrag

Wie kann ich bei folgender CSS-Animation den Text sichtbar lassen?

Hi, ich bin neu im Thema Animationen & Co. in CSS und komme jetzt beim Ausprobieren nicht mehr weiter: Ich möchte ein "Button" (in diesem Fall ein <div>), bei dem beim Hovern von links nach rechts eine Hintergrundfarbe kommt. Jedoch verschwindet bei mir dann auch der Text.

Hier der Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <link href='https://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet'>
    <style>
        .box {
            position: relative;
            margin-top: 50px;
            width: 200px;
            height: 75px;
            background-color: transparent;
            border-radius: 15px;
            border: 3px solid lightgreen;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: 'Ubuntu';
            transition: all 0.5s ease-in-out;
            z-index: 1;
        }
        .box:hover {
            color: white;
        }


        .box::after{
            position: absolute;
            left: 0;
            content: '';
            background-color: lightgreen;
            width: 0;
            height: 75px;
            border-radius: 11px;
            transition: all 0.5s ease-in-out;
            z-index: 0;
        }
        .box:hover::after{
            width: 200px;
        }



    </style>
</head>
<body>
    <div class="box">Hello</div>
</body>
</html>

...zum Beitrag

Hover-Effekt erstellen in html, css und js?

Hallo,

ich würde gerne einen Hover-Effekt erzeugen, wenn man sich mit dem Cursor über einem gewissen Bereich befindet (<Area>). Nun ist es so, dass sich die Bereiche in einem Bild (Bild ist unten) befinden, welches ich mit <map> und <area> in verschiedene Bereiche unterteilt habe (für jeden Agenten ein Bereich).

Ich habe es bis jetzt nur geschafft, dass das ganze Bild einen Hover-Effekt hatte, wenn man mit dem Cursor irgendeinen beliebigen Bereich überquert hat...

Danke schonmal im Voraus!

...zum Beitrag

Gehen CSS-Animationen auch rückwärts nach Hover?

Hallo!

Ich habe eine CSS-Animation, die bei Hover ein Element vergrößert. Wenn man die Maus wegbewegt ändert sich die Größe direkt ohne Animation wieder zurück. Wie kann man die Animation beim Webbewegen des Cursers wieder rückgängig abspielen lassen?

...zum Beitrag

Wie kann ich bei HTML / CSS einen Hover Effekt entfernen. Der Effekt soll bei der Responsive-Seite gelöscht werden.?

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen