OnMouseOver/OnMouseOut Transition-эффект [Архив форума]

Просмотр полной версии : OnMouseOver/OnMouseOut Transition-эффект

eghik92

30.10.2013, 10:33

Здравствуйте, имеется такая вещь <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;,для плавного перехода, помогите пожалуйста, как это осуществить для данного примера.

danik.js

30.10.2013, 11:06

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

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

рони

30.10.2013, 11:38

например 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>

danik.js

30.10.2013, 12:25

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

рони

30.10.2013, 12:36

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

eghik92

30.10.2013, 23:59

А не подскажите как сделать это с моим примером, я мучаюсь много времени.
<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)
Не подскажите как решить эту проблему, хожу вокруг до около, и в интернете никаких источников на эту тему, или я плохо гуглю((( :( :(

eghik92

31.10.2013, 00:02

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

danik.js

31.10.2013, 00:10

eghik92

31.10.2013, 00:27

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

eghik92

31.10.2013, 00:32

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