bei mouse bild gegen textblock tauschen ?

HP*

hallo gemeinde. möchte auf einer wordpressseite ein bild bei mouseover gegen einen textblock tauschen.
funtionieren soll das so wie hier zb.: http://www.one.org/de/die_themen/

es betrifft die bilder auf der startseite in der themenübersicht, zur zeit sind die bilder neben dem textblock links oben und der text umfliest sie.
ich hätte es dann auch gerne so, dass die einbindung der bilder beim erstellen neuer beiträge genauso easy funktioniert wie bisher.

danke euch schonmal. bin kein großer coder :)

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

kaiser

Zitat von HP*

bin kein großer coder :)

Hm. Das wird schwierig...

2 Lösungsansätze:

a) Ein jQuery-Plugin verwenden (jQuery-Seite durch suchen).
b) per Css probieren (ist die einfachere Lösung:

Code

[COLOR=Gray]<!--
Html-Beispiel:
-->[/COLOR]
<div class="[COLOR=Red]dein_artikel_container[/COLOR]">
<span class="[COLOR=SeaGreen]dein_text_container[/COLOR]">
[I]Hier kommt Dein Txt rein.[/I]
</span>
<span class="[COLOR=RoyalBlue]dein_bild_container[/COLOR]">
<img src .... />
</span>
</div>

Alles anzeigen

Code

[COLOR=Gray]/* 
Beispielcode. 
Bitte auf selfhtml oder css4you dann weiter suchen.
*/[/COLOR]
[COLOR=Red]div.dein_artikel_container { 
display: block; 
float: left; 
clear: none; 
margin:0 10px 10px 0;
padding: 10px 0 0 10px; 
width: 100px; 
height: 100px; 
}
div.dein_artikel_container span.dein_text_containter,
div.dein_artikel_container span.dein_bild_container { 
display: block; 
width: 80px; 
height: 80px; 
}[/COLOR]
[COLOR=RoyalBlue]span.dein_bild_container {
display: visible;
}
span.dein_bild_container:hover {
display: none;
}[/COLOR]
[COLOR=SeaGreen]span.dein_text_container {
display: none;
}
span.dein_text_container:hover {
display: visible;
}[/COLOR]

Alles anzeigen

Willkommen! Melden Sie sich an oder registrieren Sie sich.

bei mouse bild gegen textblock tauschen ?

Jetzt mitmachen!