Bild per Klick vergrößern: JS & CSS

Bin gerade dabei, eine einfache Foto-Gallery vom Kopf heraus zu schreiben.
In diesem Fall sind es verlinkte Images, die mittels hover, den border-radius langsam mit einer transition ändern und zusätzlich noch Farbe wechseln.

Momentan öffnen sich die Bilder im neuen Fenster (_blank), doch ich möchte nun versuchen mittels Javascript, die Bilder im Popup zu vergrößern, per onclick natürlich. Mal sehen, ob ich das hinkriege!

YES!!!!

Es hat geklappt!!! Wow, ich finds echt hammer 🙂

Buttons

Am Wochenende hatte ich ein paar Buttons angefertigt, die mittels Hovereffekt Farbe wechseln-, eine Überschrift sichtbar machen- und gleichzeitig nach oben springen sollen. Heute werde ich sie testen und gucken, ob man noch zusätzlich einen Gloweffekt anbringen kann. Ich bin schon gespannt darauf und hoffe natürlich, dass sie auch gut aussehen werden. Nur schade, dass mein geliebter ❤ Hovereffekt auf Smartphones und Co. nicht sichtbar ist, doch darauf sche*** ich jetzt mal, weil wichtig ist mir momentan mal die Desktopseite. Der Rest wird dann angepasst.

Menü mit Hover-Bilderwechsel

Gestern wollte ich mal schauen, ob es möglich ist eine Slideshow so abzuändern, dass man die Bilder mittels eines Menüs mit Hovereffekt aktivieren kann.
Ich hatte ganz übersehen, dass die Slideshow mit Javascript funktioniert, wodurch ich es dann sein gelassen habe. Es war zwar möglich „onklick“ einfach mit „onmouseover“ zu tauschen, aber die dots konnte ich nicht in ein Menü abwandeln.
Nichtsdestotrotz konnte ich einen Banner erstellen, der über das Menü die Bilder wechselt.
Hier mein Testbeispiel:

Schwer tue ich mich nun, die komplette Seite zu zentrieren und auch das Menü etwas mehr rechts vom Bild zu haben….aber ich werde mich weiter üben^^ Eigentlich wollte ich es rechts unter dem Bild haben, aber irgendwie will es noch nicht so wie ich mir das vorstelle^^ Doch ich bin froh, dass ich zumindest nahe an meiner Vorstellung dran bin 😀
Natürlich muss auch noch der leere Banner etwas an Farbe gewinnen. Er wird sich noch ändern, es war lediglich mal ein Test.

HTML/CSS: Menü funktioniert! =)

So, jetzt hab ich es endlich geschafft, dass mein Menü nicht zusammenbricht, sobald das Browserfenster verkleinert wird. Ich hätte noch gerne auf jedem Button ein Icon, doch bei längerem Linktext, wie bspw. „Impressum“ rutscht der Text immer unter den Button. Ich hab zwar herausgefunden, wie ich mein Icon positionieren kann, doch es haut irgendwie nicht hin, dass alle Icons mit Schrift einheitlich positioniert sind. Aus diesem Grund gibt es nur das Home-Icon 😀

hier der Link zur Seite:

Dams

– Der Banner muss noch ausgeschmückt werden, außerdem möchte ich noch ein weiteres Menü einsetzen, allerdings anders positioniert und dann müsste ich noch gucken ob es senkrecht oder ebenfalls horizontal erscheinen soll.
Der Name der Site (Dams) ist auf jeden Fall noch wandelbar, denn den Namen gibt es schon…es ist alles noch wandelbar und dient einfach nur dazu, ein Gefühl für html und CSS zu bekommen. Es gibt noch Vieles zu lernen, leider ist das Tutorial nun fertig, ich finde es schade, dass Macjo nicht weitere Tutorials hochgeladen hat, da er wirklich gut und verständlich erklären kann.
Es gibt sicherlich noch x weitere Youtuber, die ähnliche Tutorials anbieten, doch mir wäre es lieber gewesen weiterhin von ihm zu lernen.