Как сделать смену изображения при наведении и почему не загружается картинка через bacground?

Question

[Anton S.]

Задача такая: нужно сделать смену изображения с чб на цветное при наведении мышки и срабатывании hover.

Какое решение я нашел в инете:
в html у меня так:

<div class="main">
-------- <div class="container">
---------- <div class="main-photo"></div>  <-- вот здесь должна быть png
             Тут ниже какой то контент из текстов и кнопок
-------- </div>
</div>

В CSS так:

.main {
    position: relative;
}
.main-photo {
        position: absolute;
        background: url(../img/my_photo.png);  <-- хочу загрузить чб картинку
        display: block;
        width: 80vh;
        right: 0;
        top: 45px;
}
.main-photo:hover {
    background: url(../img/my_photo2.png);  <-- а здесь хочу загрузить цветное изображение
}

И все бы ничего, но у меня не загружается картинка через такое свойство bacground.

В чем может быть ошибка? За ранее спасибо!

Answer 1

[ThunderCat]

background-image же

Comments

[Anton S.]

тоже не работает

[ThunderCat]

AnSmirnykh, для начала - чет я сомневаюсь в

у меня не загружается картинка через такое свойство bacground.

, скорее всего все нормально загружается, просто размер самого див нулевой. Смотрите в инспекторе какие свойства у вашего дива и какой размер и бэкграунд.

[Anton S.]

ThunderCat, вы правы, спасибо.
Высота была нулевой. Совсем из головы вылетело, что для внутреннего дива с background нужно еще и высоту указывать, помимо ширины) Привык, что в основном только ширины и хватало и он автоматом изображение сжимал/увеличивал когда в html загружал картинки.