Форум

eghik92 · #1 (**permalink**) 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 · #2 (**permalink**) 30.10.2013, 11:06

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

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

рони · #3 (**permalink**) 30.10.2013, 11:38

Сообщение от 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>

danik.js · #4 (**permalink**) 30.10.2013, 12:25

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

рони · #5 (**permalink**) 30.10.2013, 12:36

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

eghik92 · #6 (**permalink**) 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 · #7 (**permalink**) 31.10.2013, 00:02

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

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

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

danik.js · #8 (**permalink**) 31.10.2013, 00:10

<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>

eghik92 · #9 (**permalink**) 31.10.2013, 00:27

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

eghik92 · #10 (**permalink**) 31.10.2013, 00:32

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

Форум

Справочник

Discord чат

Курсы javascript