PHP jquery image effect on mouseover

Question

I want to make my original image to portrait when I mouse over on an image. Can anyone please tell me how to do this? I want to open whole image on mouseover with portrait effect.

Do you have the portrait image available or do you want to do that with css? — Deepak Biswal, Oct 07 '14 at 07:38
I want to create portrait from original image. I dont have portrait image available. — Krupesh Jarsaniya, Oct 07 '14 at 07:39
What do you mean by "original" image? Can u give an example or website address where it is done? — Avisek Chakraborty, Oct 07 '14 at 08:21

score 1 · Accepted Answer · answered Oct 07 '14 at 07:57

1

You should use css transform.

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

example jsfiddle here

answered Oct 07 '14 at 07:57

Bhavesh G

3,000
4
39
66

KeizerBridge · Answer 2 · 2014-10-27T13:08:09.217

You should use jQuery to this with method mouseover() and mouseout(), The rotate attribute doesn't let your picture horizontally. Here my 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'});
});

Or KISS by doing this in pure CSS without the animate method in jQuery

score 0 · Answer 3 · answered Oct 07 '14 at 07:43

On mouse over of the image you can open a DIV with some z-index and then place the image and do some css styling to make that portrait effect. You can make the popup DIV size as per the image size as well. Check this for css property. I think this will help you.

score 0 · Answer 4 · answered Oct 07 '14 at 07:51

This is pretty straight forward using css3

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

have a look at css transform http://www.w3schools.com/css/css3_2dtransforms.asp

edit : actually that might not be what you want. The image would transform back to landscape on mouseout

PHP jquery image effect on mouseover

4 Answers4