Bewegen Sie den Text und ersetzen Sie ihn durch image

Question

Ich möchte einige Text durch ein Bild bei Hover mit einfachen HTML/CSS ersetzen.

• NO: Bild angezeigt wird ein Text
• NO: Text auf das Bild
• NO: Bild mit Bild ersetzen
• JA: Text mit Bild ersetzen

Answer 1

Hier ist etwas, mit zu beginnen ... können Sie CSS-Hintergrundbild oder ein IMG-Tag in der a verwenden. Ich weiß nicht wirklich, was du erreichen willst, aber es ist ein Anfang.

https://jsfiddle.net/wq2pjafc/1/

html:

<a class="fancy"> 
    <span class="text">text</span> 
</a> 

css:

.fancy { 
    display: block; 
    width: 455px; 
    height: 315px; 
    background: #eee; 
} 
.fancy:hover { 
    background: url('http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg') 
} 
.fancy:hover .text { 
    display: none; 
}