ホバーテキストを置き換えて画像に置き換えます

Question

単純なHTML/CSSを使用して、ホバー上の画像でテキストを置き換えたいとします。

• NO：画像の上にテキスト
• NO：画像はNO
• テキストの下に表示された画像は、画像
• YESと交換してください：テキストイメージと交換

Answer 1

はここで開始する何か...あなたはCSSの背景画像、またはaの内部にimgタグを使用することができます。私はあなたが達成しようとしていることを本当に知っていませんが、それは始まりです。

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; 
}