Antworten auf deine Fragen:
Neues Thema erstellen

[Contao] Bild Hover Effekt

Zaolat

Aktives Mitglied

Moin Moin,

ich erstelle eine Seite und habe im Hauptbereich einige Bild-Elemente mittels Bordmittel von Contao eingefügt. Nun möchte ich, dass bei dem Hover Effekt, ein anderes Bild überlappt wird;
Als Beispiel:
Bild 1 -> Maus fährt rüber, dann ist Bild A zu sehen
Bild 2 -> Maus fährt rüber, dann ist Bild B zu sehen

Ich weiß nur nicht, wie ich das mittels Contao hinbekomme.
Mag mir einer dabei helfen.
 

Enigmon

Nicht mehr ganz neu hier

Ich habe das mal schnell aus einem anderen Hoverprogarmm "zurechtgepfriemelt".
Es funktioniert und kann dir ja als Ansatz dienen:

Code:
<!DOCTYPE html>
<html lang="de-DE">
<head>
<meta charset="UTF-8">
<title>Design 1</title>
<!--[if lt IE 9]>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.js"></script>
<![endif]-->
<link rel="stylesheet" href="styles.css">
<style>
header, section, footer, aside, nav, main, article, figure {
    display: block;
}
body{
margin: 0;
padding: 0;
background-color: #343434;
}
.BilderListe{
    clear: both;
    list-style: none;
}
.BilderListe li{
    position: relative;
    float:left;
    overflow: hidden;
}
.BilderListe img{
    width: 10em;
    height: 13em;
    padding: 0; margin: 0;
    float: left;
    z-index: 4;
}
.BilderListe .HochPopFeld{
    position: absolute;
    top: 13em;
    opacity: 1;
    -moz-transition: all 0.25s ease-in;
    -o-transition: all 0.25s ease-in;
    -webkit-transition: all 0.25s ease-in;
    -ms-transition: all 0.25s ease-in;
    transition: all 0.25s ease-in;
}
.BilderListe li:hover .HochPopFeld{
    position: absolute;
    opacity: 1;
    -moz-transform: translateY(-13em);
    -o-transform: translateY(-13em);
    -webkit-transform: translateY(-13em);
    -ms-transform: translateY(-13em);
    transform: translateY(-13em);
}
.BilderListe .HoverBild{
    position: absolute;
    height: 13em;
    width: 10em;
    background-color: rgba(0,0,0,0.7);
    z-index: 5;
}

</style>
</head>
<body>
<header></header>
<nav></nav>
<section>
<ul class="BilderListe">
    <li>
        <img src="img/img1.png" style="width: 10em; height: 13em">
        <div class="HochPopFeld">
            <img class="HoverBild" src="img/img3.png">
        </div>
    </li>
</ul>
</section>
<footer></footer>
</body>
</html>

LG
Thomas
 

spacefront

Aktives Mitglied

Hi,

das ist eine so eine Sache, je nach Contao Version kannst Du es mit dem TinyMCE Editor machen. Evtl. musst Du da downgraden. (ich glaube auf der Version 1.5)
Oder Du arbeitetst mit CSS Sprites.

Evtl hilft Dir auch das weiter

Gruß
Alex
I
 

Zaolat

Aktives Mitglied

Das mit dem Template habe ich schon gefunden und wie dort beschrieben eingebunden. Nur bei mir funktioniert es nicht und ich finde nicht den Grund dafür.
 

spacefront

Aktives Mitglied

Hm ich habe es is jetzt noch nicht verwendet.

Ich wies jetzt auch nicht wie Du es genau eingebunden hast. Ich glaube nur Du musst Moodtool aktivieren und die Datei muss .html5 heißen und nicht mehr .tpl

Das wärs jetzt auf die schnelle

Alex
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.

Statistik des Forums

Themen
118.619
Beiträge
1.538.363
Mitglieder
67.540
Neuestes Mitglied
Alex Weidner
Oben