Frage von TobiNope, 18

Website - Wie erstelle ich diesen Effekt?

Website: Wie erstelle ich diesen Effekt?

Mir gefällt diese Startseite sehr gut: http://dokucraft.aerobatic.io/

Wie gestalte ich diesen Effekt mit den Bildern, die auf weitere Seiten führen? Gibt es da eine Möglichkeit einer Vorlage?

Danke für die Hilfe! :)

Hilfreichste Antwort - ausgezeichnet vom Fragesteller
von weed9r, 14

So ich hab dir mal ein kleines snippet geschrieben, das du dir anschauen kannst.

https://jsfiddle.net/ra61ydxL/

Oben rechts findest du das CSS. Wenn du es umgekehrt haben möchtest, heißt das obere Bild soll beim Mouseover heller werden und das untere dunkler, dann musst du nur die opacity verändern.

Opacity ist eine CSS Eigenschaft die dinge transparenter macht. 0.8 ist 80%. 1 ist 100% und 0 ist demnach 0 %.

Wenn du noch fragen haben solltest, kannst du die jederzeit stellen

Kommentar von TobiNope ,

Vielen, vielen Dank! :)

Antwort
von weed9r, 18

Hi,

ich würde dir sehr gerne helfen nur bin ich unglaublich verwirrt gerade. Welchen Effekt meinst du? 

Kommentar von TobiNope ,

Danke für deine Antwort :)
Also ich würde gerne die Startseite meiner Homepage genau so gestalten, wie bei dem Beispiel. Also 2-3 Bilder, die die komplette Seite ausfüllen. Wenn man dann mit der Maus über diese Bilder fährt, sollen diese heller werden :)

Kommentar von weed9r ,

Ah ok, dass konnte ich bei mir nicht sehen. 

Ich geh mal davon aus, dass du etwas Ahnung von Html/css hast. Wenn nicht, erkläre ich dir das gern genauer. 

Im Grunde brauchst du für die Klasse deines Bildes nur eine pseudoklasse namens :hover, einen weißen hintergrund und die css-methode transition. Das ganze sieht etwa so aus:

<style>

.wrapper {

Background:white;

}

.hovereffekt {

transition: opacity 0.2s;

}

.hovereffekt:hover {

opacity: 0.8;

}

</style>

<div class="wrapper">

<img class="hovereffekt" src="bild.jpg" alt="bild">

</div>

Da ich das mit dem Handy geschrieben hab kann ich es leider nicht trsten. Aber das sollte so passen. 

Keine passende Antwort gefunden?

Fragen Sie die Community

Weitere Fragen mit Antworten