Hallo Katharina,
man kann schon das jeweilige Design anpassen, wenn man dies dann am besten in den Design-Dateien im Design-Ordner tut. Aber dies ist ein größerer Aufwand umzusetzen, wenn man dann alles in den Design-Einstellungen flexiebel anpassen möchte.
Ich habe hier mal eine andere Alternative zu deinem Thema, das du mal ausprobieren und anpassen kannst. Wenn es Dir gefällt, dann ist gut, wenn nicht, dann halt wieder löschen.
Füge mal folgenden Code bei Seiten-Eigenschaften Reiter "HTML" z.B. im <head>-Bereich ein:
<style>
@media (min-width: 1024px) {
header {
transition: all 1.5s ease-in;
cursor: zoom-in;
}
header:active, header.click {
z-index: 2024;
transform: scale(1.2);
transition: all 0.1s ease-in;
border-radius: 25px;
box-shadow: 200px 200px 200px 200px gray;
}
}
</style>
Korrektur 31.07.2024 -> Es war im Code unten eine geschweifte Klammer zu viel, eventuell daher der komische rechts-klick effekt. da hatte ich bei mir noch winwn weiteren Code und diese vergessen zu entfernen.
Funktion: Durch ein Klick (bzw. Mousetaste gedrückt halten) mit der Lupe (Symbol: Curser: zoom-in) wird das Bild vergrößert. (Je nach Browser und Betriebsystem linke Mousetaste nur als Taster und rechte Mousetaste bei einigen wenn groß, dauerhaft groß. Diesen Effekt habe ich bei mir einmal festgestellt). Teste selber.
Kurze Erklärung:
- Zeile -> @media... sorgt dafür, dass dies nur für Desktop ausgeführt wird, wenn es auch für Smartphone ausgeführt werden soll, dann diese Zeile löschen und auch unten eine von den zwei geschweifte Klammer löschen.
- Zeile -> transform: scale.... ist der Faktor, wie viel größer das Bild (Eyecatcher) ercheinen soll.
- Zeile -> transition... sorgt entsprechnd nach der Zeitangabe in Sekunden die Animation zur Vergrößerung oder Verkleinerung.
- Zeile -> border-radius:... Hier kannst du in Pixel angeben, wie groß beim vergrößertem Bild die runden Ecken erscheinen sollen, wenn du keine runden Ecken haben willst, diese Zeile einfach löschen.
- Zeile -> box-shadow:... Ist für den Schatten zuständig, Größe in Pixel (theoretisch kann auch ein Minuswert angeben werden) und Farbe (in Englisch oder #...-Code) anpassbar. Wenn kein Schatten gewünscht, dann diese Zeile löschen.
- Zeile -> z-index...: stellt das Bild in den Vordergrund, man will ja das Bild vergrößert sehen.
Theoretisch kann man auch einen Link (URL) hinterlegen, entweder für ein anderes Bild oder für eine andere Seite, aber hierzu müsste man dann deutlich mehr anpassen (ginge sogar begrenz in diesem einem Code) und am besten direkt in 2-3 Design-Dateien.
Beste Grüße und viel Spaß mit diesem Code. (Geht auch bei manch anderen Designs, da dieser Code sich auf den Header bezieht und nicht auf das Bild, Auch der Bildwechler (Bilder in der Galerie) bleibt hierdurch erhalten)
Mit freundlichen Grüßen
Thomas
Web To Date seit 2004, Siquando Web 12, Pro Web 8, Web Client
Dieser Beitrag wurde bereits 2 mal bearbeitet, zuletzt von »
MuggelClan« (31.07.2024, 09:07)
