Javascript-форум - OnMouseOver/OnMouseOut Transition-эффект

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - OnMouseOver/OnMouseOut Transition-эффект (https://javascript.ru/forum/dom-window/42520-onmouseover-onmouseout-transition-ehffekt.html)

OnMouseOver/OnMouseOut Transition-эффект

Здравствуйте, имеется такая вещь

<img src="images/5_e.jpg" alt="" onmouseout="this.src='images/5_e.jpg'" onmouseover="this.src='images/5.jpg'"/>

замена картинки проходит отлично, хочу прикрутить CSS transition: transition: all 0.5s ease;,для плавного перехода, помогите пожалуйста, как это осуществить для данного примера.

1) transition применяется только к css-свойствам. Какое css-свойство ты меняешь?
2) не все свойства поддаются transition'у, например background-image:url() нелья плавно изменить.

Создавай два элемента и анимируй их прозрачности. Именно так это и работает на всех сайтах.

Цитата:

Сообщение от danik.js

например background-image:url() нелья плавно изменить

:-? Chrome может

<!DOCTYPE html>
<head>
<style type="text/css">
#tile {
	width: 72px;
	height: 72px;
	background-color: #3896F6;
	background-image: url('http://javascript.ru/forum/image.php?u=8952&dateline=1362465013');
	background-repeat: no-repeat;
	border: 3px solid #008E8E;
    background-size: cover;
	transition: all 2s;
	-moz-transition: all 2s; /* Firefox Support */
	-webkit-transition: all 2s; /* Chrome and Safari Support */
	-o-transition: all 2s; /* Opera Support */
}

#tile:hover {
	border-color: #FFFF00;
	background-image: url('http://javascript.ru/forum/image.php?u=7416&dateline=1372796129');
}
</style>
<title></title>
</head>
<html>
<body>
<div id="tile">
</div>
</body>
</html>

Хм, забавно. Пока писал, чувствовал что могу ошибиться. Хром конечно удивил.

:write:
можно менять background-position это вроде все сейчас поддерживают

А не подскажите как сделать это с моим примером, я мучаюсь много времени.

<img src="images/5.jpg" width="250" height="212" alt="" id="opacity">
					<img src="images/5_e.jpg" width="250" height="212" alt="" id="body">

#body, #opacity{
z-index: 2;
position: relative;
}
#opacity {
position: absolute;
opacity: 0;
z-index: 3;
transition: all 0.3s linear;
width: 100%;
height: 100%;
}
#opacity:hover {
opacity: 1;
}

получается, первая картинка которую меняем позиционирована нормально, а вот та, на которую меняем (со свойством absolute) при наведении растягивается от начала (top и left как у первой) до конца экрана (растягивается bottom и right)
Не подскажите как решить эту проблему, хожу вокруг до около, и в интернете никаких источников на эту тему, или я плохо гуглю((( :( :(

Цитата:

Сообщение от danik.js

Создавай два элемента и анимируй их прозрачности. Именно так это и работает на всех сайтах.

не могли бы вы, пожалуйста, показать пример, дело в том, что верстка еще должна быть адаптивной.

<style>
.transition{
    position: relative;
    width: 20px;
    height: 20px;
}
.transition .background{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: opacity 0.5s;
}
.transition .background{
    background: url(http://javascript.ru/forum/images/smilies/sad.gif) no-repeat;
    opacity: 1;
}
.transition .background.hover{
    background: url(http://javascript.ru/forum/images/smilies/smile.gif) no-repeat;
    opacity: 0;
}
.transition:hover .background{
    opacity: 0;
}
.transition:hover .background.hover{
    opacity: 1;
}
</style>
<div class="transition">
    <div class="background"></div>
    <div class="background hover"></div>
</div>

А можно это как нибудь сделать, если картинки в <img> находятся, в самом теле, потому что их будет очень много и для каждой не совсем хорошо прописывать в стили и background?

Все сработало!!! Спасибо большое!!!:)