Mit Bildeffekten kann meine seine Jimdo Webseite entsprechend aufpeppen - egal ob sie einfach zur Verschönerung dienen oder als Navigation dienen.
In diesem Beitrag wird beschrieben, wie man auf einer Jimdo Webseite, mittels CSS, Bilder mit Hover-Effekt einfügt, und diese entsprechend verlinkt. Dies wird nur exemplarisch, für einen Effekt beschrieben. Weitere Beispiele findet man unter: https://bootstrapious.com/p/bootstrap-image-hover
(Codequelle: https://bootstrapious.com/p/bootstrap-image-hover)
|
Das gewünschte Bild hinzufügen |
Im ersten Schritt ist es notwendig das gewünschte Bild hinzuzufügen. Hier hat Jimdo so seine Eigenheit. Bei Jimdo gibt es keinen eigenen Webspace. Das heißt man muss eine neue Seite erstellen und diese im Menü verstecken. Auf dieser Seite fügt man dann das entsprechende Bild hinzu. Danach öffnet man im Live-Modus die Seite über www.meine-seite.at/versteckte-seite und öffnet mit Rechtsklick und "Bild in neuem Tab öffnen" das Bild in einem neuen Browsertab. Für das Beispiel wird das Vorschaubild von oben verwendet.
|
|
Den CSS-Code hinzufügen |
Im nächsten Schritt muss man den CSS-Code hinzufügen. Möchte man den gewünschten Effekt auf mehreren Seiten verwenden, so macht es Sinn den CSS-Code im Head der Seite einzufügen (siehe auch "Wie bearbeite ich den Head der Seite?"). Durch das Einfügen im Head erhöht man natürlich auch die Anzahl der Scripte die beim Laden der Seite geladen werden müssen. Alternativ dazu kann man den Code auch in ein "Widget/HTML"-Element einfügen, wenn man den Effekt nur auf einer Seite verwenden möchte. Dies wird bei dem Beispiel gemacht.
Es ist nun folgender CSS-Code notwendig:
<style type="text/css">
/*<![CDATA[*/
/* Hover */
.hover {
overflow: hidden;
position: relative;
padding-bottom: 60%;
}
.hover-overlay {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 90;
transition: all 0.4s;
}
.hover img {
width: 100%;
position: absolute;
top: 0;
left: 0;
transition: all 0.3s;
}
.hover-content {
position: relative;
z-index: 99;
}
.hover-1-content {
position: absolute;
bottom: -20%;
left: 0%;
z-index: 99;
transition: all 0.4s;
bottom: 0;
width: 100%;
line-height: 1em;
color: white;
background: rgba(0,0,0,.5);
}
.hover-1-description {
transform: translateY(0.5rem);
transition: all 0.4s;
opacity: 0;
}
.hover-1:hover .hover-1-content {
bottom: 2rem;
}
.hover-1:hover .hover-1-description {
opacity: 1;
transform: none;
}
.hover-1:hover .hover-overlay {
background: rgba(0, 0, 0, 0.5);
opacity: 1;
}
/*]]>*/
</style>
|
|
Das Bild mit Hover-Effekt hinzufügen |
Im letzten Teil muss man lediglich den unten angeführten Code an der gewünschten Stelle über ein "Widget/HTML"-Element auf der Seite hinzufügen. Für das Beispiel wird das gleiche Element verwendet wie für den oberen CSS-Code.
<div class="col-lg-6 mb-3 mb-lg-0">
<div class="hover hover-1 text-white rounded">
<a href="https://bootstrapious.com/p/bootstrap-image-hover"><img src="https://image.jimcdn.com/app/cms/image/transf/dimension=260x1024:format=png/path/s6393775bd75dc252/image/i3ac1d43299c24529/version/1601973341/beispiele-f%C3%BCr-bildeffekte-mit-css.png" alt="Beispiel Hover-Effekt" /></a>
<div class="hover-1-content px-5 py-4">
<div style="text-indent:10px;">
<a class="hover-1-title text-uppercase font-weight-bold mb-0" href="https://bootstrapious.com/p/bootstrap-image-hover" style="color: #ffffff; text-decoration:none"><span style="font-size: 18px;"><b>Bildeffekte</b></span></a>
</div>
<div style="text-indent:10px;">
<a class="hover-1-description font-weight-light mb-0" href="https://bootstrapious.com/p/bootstrap-image-hover" style="color: #ffffff; text-decoration:none">weitere Beispiele</a>
</div>
</div>
</div>
</div>
Der Code kann entsprechend den Wünschen angepasst werden. Beispielsweise kann man die Farbe, Transparenz etc. anpassen. Außerdem kann man auch kann man auch mehrere, verschiedene Bilder mit Hover-Effekt und unterschiedlichen Texten bzw. Links hinzufügen. Hierzu ist es lediglich notwendig ein neues "Widget/HTML" hinzuzufügen, den Code kopieren und an den entsprechenden Stellen den Link, das Bild und die Texte zu tauschen:
<a href="[Link]">
<img src="[Bild]" alt="" />
<a class="hover-1-title text-uppercase font-weight-bold mb-0" href="[Link]" style="color: #ffffff; text-decoration:none">
<a class="hover-1-description font-weight-light mb-0" href="[Link]" style="color: #ffffff; text-decoration:none">
Hier findet man noch weitere Beispiele wie man andere Hover-Effekte machen: https://bootstrapious.com/p/bootstrap-image-hover
Viel Spaß damit!
TIPP: Das Spalten-Element von Jimdo eignet sich sehr gut für die Anordnung von Bildern mit Hover-Effekt, da es automatisch die Größe des Bildes regelt.
Wenn dir der Beitrag gefallen hat, dann hinterlasse mir einfach einen Kommentar oder teile ihn auch gerne!
Kommentar schreiben