Наведите текст и замените на изображение

Question

Я хочу заменить некоторый текст изображением на зависании, используя простой HTML/CSS.

• NO: изображение появляется ниже текст
• NO: текст над изображением
• NO: изображение заменить изображение
• ДА: Заменить текст с изображением

Answer 1

Вот кое-что, чтобы начать с ... вы можете использовать фоновое изображение css или img-тег внутри a. Я действительно не знаю, чего вы пытаетесь достичь, но это начало.

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