Nextgen-Gallery - Thumbnails mit Hover austauschen

microbie

Im Grunde ist dies eine CSS Frage, aber vielelicht bei diesem Plugin speziell.

Ich möchte bei einem Mouseover die Thumbnails gegen ein bestimmtes Bild austauschen. Das sollte mit "hover" innerhalb der Nextgen style.css doch eigentlich funktionieren, aber das Bild das erscheinen soll, ist immer nur hinter den Thumbnails (bewusst leicht verrückt) zu sehen. Irgendwas mache ich falsch.

Der hover-code sieht so aus:

Code

.ngg-gallery-thumbnail img:hover {
	background-image: url('http://www.xyz.de/xyz.jpg');
 }

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Narcanti

Bitte zeigen.

maescot

Eigentlich logisch: überleg mal, wofür das "background" in background-image steht...

Du musst also das normale Bild unsichtbar machen

Versuche, um das Bild einen Absatz (div, p evtl span) zu machen oder zu finden und dort das Hintergrundbild einzublenden. Das eigentliche Bild darin kannst du mit visibility:hidden ausblenden, während das Hintergrundbild des Absatzes bleibt....

microbie

Ähhhh, ja, background. Stimmt natürlich :-?

Der Hinweis hat auf jeden Fall geholfen und ich habe versucht, das Ganze mit "Opacity" zu lösen. Das funktioniert auch soweit, aber die Hintegrundbilder sind nun merkwürdig gross bzw. verzerrt. Wohlmöglich ein Fehler an anderer Stelle.

Dies ist die Seite:
CHECK YOUR HEAD Artists

Und das ist der die Stelle im Code:

Code

.ngg-gallery-thumbnail {
        background-image: url('http://www.checkyourhead.de/main/images/cover_hover.jpg');
	float: left;
	margin-right: 5px;
	text-align: center;
}


.ngg-gallery-thumbnail img {
	border:0px solid #000000;
	display:block;  
	margin:4px 0px 4px 5px;
	padding:0px;
        padding-bottom:4px;
	position:relative;
}


.ngg-gallery-thumbnail img:hover {
	filter: alpha(opacity=0);
	-moz-opacity: .0;
    opacity: .0;
}

Alles anzeigen

microbie

Problem gelöst

Ich habe das Problem gelöst. Vielleicht interessiert es jemanden, der ähnliches machen möchte.

Code

.ngg-gallery-thumbnail {
        background: #000000;
	width: 70px;
        height: 70px;
	float: left;
	margin-right: 4px;
        border:1px solid #000000;
	margin:3px 0px 8px 4px;
	display:block;  
	position:relative;


}


.ngg-gallery-thumbnail img {
        filter: alpha(opacity=100);
	-moz-opacity: 1.0;
        opacity: 1.0;
	border:0px solid #000000;
        display:block;  
	position:relative;
	
}


.ngg-gallery-thumbnail img:hover {
        background: #000000;
        filter: alpha(opacity=0);
	-moz-opacity: 0.0;
        opacity: 0.0;
	display:block; 
}

Alles anzeigen

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Nextgen-Gallery - Thumbnails mit Hover austauschen

Jetzt mitmachen!