[Contao] Bild Hover Effekt

Zaolat · 10.05.2015

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 · 10.05.2015

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 · 10.05.2015

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 · 10.05.2015

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 · 10.05.2015

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

Zaolat · 10.05.2015

Ich habe es nun anders gelöst bekommen. Mit CSS und Transition