«Наведите изображение изображения изображения» CSS не работает должным образом

Question

Я искал в Интернете и нашел это: How to display image over image on hover with css.
Я пробовал код this image в jsfiddle и статью в блоге с помощью Chrome и Firefox.
Ни один из них не показывает результат, как this image.
Что-то не так в моем коде? Благодарю.

a { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
a:hover:before { 
 
    content: ''; 
 
    display: block; 
 
    background-image:url('http://i.imgur.com/fGAbTOj.png'); 
 
    width: 50px; 
 
    height: 50px; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
}

<a href="#"><img src="http://cdn.akamai.steamstatic.com/steam/apps/271590/ss_80b965d66b13d6eb5e1468151a371e12fe159663.600x338.jpg" /></a>

Answer 1

Используйте background-size свойство, как вы устанавливаете background-image свойство для a:before элемента и размер фонового изображения 256x256. Но вы определили width & height элемента a:before на 50px, поэтому размер фонового изображения также должен быть 50px.

Просто используйте:

a:hover:before { 
    background-size: 50px; /* as you have 'width' and 'height' defined as 50px each */ 
} 

Посмотрите на ниже фрагменте кода:

a { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
a:hover:before { 
 
    content: ''; 
 
    display: block; 
 
    background-image:url('http://i.imgur.com/fGAbTOj.png'); 
 
    width: 50px; 
 
    height: 50px; 
 
    background-size: 50px; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
}

<a href="#"><img src="http://cdn.akamai.steamstatic.com/steam/apps/271590/ss_80b965d66b13d6eb5e1468151a371e12fe159663.600x338.jpg" /></a>

Надежда это помогает!