JavaScript-эффект изображения jquery при наведении курсора мыши

Question

JavaScript-эффект изображения jquery при наведении курсора мыши

Я хочу сделать исходное изображение портретным, когда наведу курсор мыши на изображение. Может кто-нибудь, пожалуйста, скажите мне, как это сделать? Я хочу открыть целое изображение при наведении курсора с эффектом портрета.

0

gdlib javascript jquery php

Решение

Другие решения

Вы должны использовать jQuery для этого с методами mouseover () и mouseout (). Атрибут rotate не позволяет вашему изображению горизонтально.
Здесь мой JSfiddle.

http://jsfiddle.net/gLj8n9s6/

CSS

#main {
width: 300px;
height: 200px;
overflow: hidden;
}
#img {
width:300px;
height:200px;
}

HTML

<div id="main">
<img id="img" src="http://s13.postimg.org/m3yqyd7zb/windows_xp_bliss_wide.jpg" />
</div>

JQuery

$('#main').mouseover(function() {
$(this).animate({width : '200px'});
});
$('#main').mouseout(function() {
$(this).animate({width : '300px'});
});

Или поцелуй, делая это в чистом CSS без метода animate в jQuery

1

При наведении мыши на изображение вы можете открыть DIV с некоторым z-index, а затем поместите изображение и сделайте немного CSS-стили, чтобы создать эффект портрета. Вы можете сделать размер всплывающего DIV в соответствии с размером изображения. Проверьте этот для собственности css. Я думаю, что это поможет вам.

0

Это довольно просто, используя css3

img:hover {
transform: rotate(90deg);
}

взглянуть на преобразование CSS http://www.w3schools.com/css/css3_2dtransforms.asp

изменить: на самом деле это может быть не то, что вы хотите. Изображение преобразуется обратно в ландшафт при наведении мыши

0

Источник

Accepted Answer

Вы должны использовать CSS transform.

.main:hover img {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}

пример jsfiddle здесь

1