Форум Сайтостроение Веб-строительство

Transition background image. Вопрос.

D
На сайте с 01.02.2016
Offline
38
Devero
257

Здравствуйте. Не могу понять. Можно ли анимировать картинку? Есть кнопка. При наведении на нее хочу чтобы появлялась справа картинка и менялся фон. С помощью Transition можно это осуществить?

S
На сайте с 30.09.2016
Offline
469
Sitealert
#1

Определённо можно. Как-то так

<style>

.all{width: 300px;height: 300px;}

.hide{float: right;}

.show:hover{background: #0f0;transition: background 2s;}

.hide{width: 200px;height: 200px;background-color: #f00;opacity: 0;}

.show:hover+.hide{opacity: 1;transition: opacity 2s;}

</style>

<div class='all'>

<button class='show'>Show</button>

<div class='hide'></div>

</div>
Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий