У меня есть набор из трех горизонтальных изображений. При наведении каждого из этих изображений я показываю изображение с подсказкой. Но проблема, с которой я столкнулся, - это не изменить размер изображения. Если я пойду на уменьшение высоты и ширины изображения инструмента, то отобразится только часть изображения. Фактически все изображение должно отображаться при наведении. Но этого не происходит. Может кто-нибудь, пожалуйста, помогите мне в этом отношении?
Ниже приведен код HTML:
<table style="width:100%" id="thumbs">
<tr>
<td><span style="cursor:pointer" id="tooltip1"><img id="img1" width="80" height="80" src="http://54.174.50.242/theme/frontend/foxplus/style/default/image/layout/OpenIcon.png"/></span></td>
<td><span style="cursor:pointer" id="tooltip2"><img id="img2" width="80" height="80" src="http://54.174.50.242/theme/frontend/foxplus/style/default/image/layout/ColsedIcon.png"/></span> </td>
<td><span style="cursor:pointer" id="tooltip3"><img id="img3" width="80" height="80" src="http://54.174.50.242/theme/frontend/foxplus/style/default/image/layout/SecretIcon.png"/></span> </td>
</tr>
</table>
Код CSS:
tr span {
display: block;
position: relative;
}
tr span:hover {
z-index: 1;
}
tr span:hover:after {
content:"";
background-image: url('http://lorempixel.com/273/274/');
position: absolute;
top:50%;
left: 50%;
width: 273px;
height: 274px;
}
Может кто-нибудь, пожалуйста, помогите мне в этом отношении?
Ссылка JS Fiddle выглядит следующим образом: Демо
tr span:hover:after {
content:"";
background-image: url('http://lorempixel.com/273/279/');
position: absolute;
background-repeat:no-repeat;
background-size:contain;
left: 50%;
width: 100px;
height: 100px;
}
таким образом вы можете уменьшить размер наконечника инструмента и отобразить все изображение.
background-size:cover;
заставляет фоновое изображение соответствовать.
ПОПРОБУЙ ЭТО:
tr span:hover:after {
content:"";
background-image: url('http://lorempixel.com/273/274/');
background-size:contain;
position: absolute;
top:50%;
left: 50%;
width: 273px;
height: 274px;
}
contain
размер изображения, может быть, добавить background-repeat: no-repeat
?