Изменить размер/масштаб изображения с: hover

Question

У меня есть изображение с событием зависания. Единственная проблема заключается в том, что он не масштабируется до меньшего размера или для мобильных экранов. Я потратил много времени на исследования и ничего не нашел. Я думал, что 100% -ная ширина должна была сделать трюк. Я должен что-то упустить.

Codepen link.

Пожалуйста, помогите перед моими расколов мозга. Также, критика приветствуется.

Answer 1

Проверьте с этим один:

body, html { 
width:100%; 
height:100%; 
} 
.myButtonLink { 
background: url("https://dl.dropbox.com/u/5869656/Caroline%20Ziv/Home-test3.jpg") no-repeat scroll 0 0 transparent; 
border: 10px solid #FFFFFF; 
box-shadow: 1px 1px 2px #E6E6E6; 
display: block; 
height: 100%; 
text-indent: -99999px; 
width: 100%; 
background-size: 100%; 
} 
.myButtonLink:hover { 
background: url("https://dl.dropbox.com/u/5869656/Caroline%20Ziv/Home-test5.jpg") no-repeat scroll 0 0 transparent; 
border: 10px solid #FFFFFF; 
box-shadow: 1px 1px 2px #E6E6E6; 
background-size: 100%; 
} 

Также примените ниже css к странице, которую вы загрузили в iframe.

body, html { 
width:100%; 
height:100%; 
} 

Надеется, что это поможет

Answer 2

Выполните следующие действия:

• Применить max-width: 100%; к img
• Удалить text-indent: -9999px;
• Удалить фоновое изображение на div