Hallo Leute,
in einer Bildergalerie werden Verlinkungen bereitgestellt. Beim Maus-Ueberfahren wird das Bild leicht angezoomt, es kommt ein Blau Filter darauf und der Link Text wird eingeblendet. Sieht richtig huebsch aus. Jetzt moechten wir aber diesen Effekt permanent haben, d.h. ohne das die Maus erst extra darueber fahren muss. Wisst ihr vielleicht wie so was gehen koennte?
Ich kann zwar ein wenig CSS aber hier bin ich weit ueberfragt.
Hier mal die Test-Seite. Etwa in der Seiten Mitte sind 3 x 2 Bilder, diese haben den Mouse-Over Effekt.
Im Inspektor vom FireFox habe ich zwar schon einige CSS-Dateien ausgemacht allerdings sind mir Pseudo Elemente wohl noch eher ein Raetsel. Es haengt sich wohl alles am Element "transition" auf. Hier mal die CSS Auszuege um die es wohl glaube ich geht.
Aus der Datenbank:
position: absolute;
top: 0px;
left: 0px;
visibility: visible;
transition: transform 250ms ease-out 0s, opacity 250ms ease-out 0s;Aus dem Modul SP Simple Portfolio
.sp-simpleportfolio .sp-simpleportfolio-item .sp-simpleportfolio-overlay-wrapper .sp-simpleportfolio-overlay {
opacity: 0;
transition: opacity 400ms;
-webkit-transition: opacity 400ms;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
padding: 10px;
background: rgba(0, 0, 0, 0.5);
color: #fff;
z-index: 2;
}Dann geht es wohl noch um ": :before" und ": :after" aber da bin ich mir noch nicht ganz sicher wie da funzt.
Hoffe ich habe irgendwie erklaert was ich erreichen will.
liebe Gruesse,
gutschy
