CODEWITHSUNDEEP
htmlcssimagemove
Saiful Islam
Saiful Islam

Reputation: 131

How to make images move automatically + on mouseover in CSS/HTML?

How to make images move automatically + on mouseover in CSS/HTML?

For example Ek Main Aur Ekk Tu Movie Site

Upvotes: 1

Views: 27466

Answers (4)

Emilio
Emilio

Reputation: 71

you could make an invisible div, and then use the query .attr() tag to change the image on hover. I'm not sure I get your question though, because I couldn't find the site that wanted to base yours off of.

Upvotes: 0

Leandro Galluppi
Leandro Galluppi

Reputation: 915

It uses something called parallax effect. I found a jquery plugin that seems to help do this kind of effects. The plugin is called Plax, here is the demo

Upvotes: 1

Laszlo
Laszlo

Reputation: 2313

Maybe you can use JavaScript, like this: http://jsfiddle.net/HGjQC/2/

Upvotes: -1

Kyle
Kyle

Reputation: 67194

It's actually really easy to do with CSS3:

.moveMe
{
    width: 150px;
    height: 40px;
    background: #f01;
    position: absolute;
    top: 0;
    -webkit-transition: top 2s;
    -moz-transition: top 2s;
    -o-transition: top 2s;
}

.moveMe:hover
{
    top: 10px;
    -webkit-transition: top 0.3s;
    -moz-transition: top 0.3s;
    -o-transition: top 0.3s;
}

This tells the element onHover to transition between the two states of top over a period of 2 seconds and 0.3 seconds when the mouse leaves.

Check it out here: http://jsfiddle.net/HGjQC/'

As this is a CSS3 technique, the code here will only work in webkit browsers (Chrome, Safari, any other browser using the Chromium engine [Rockmelt]), Opera and Mozilla browsers.

For IE, yoy'll probably need to use Javascript for now until MS decides to implement more CSS3.

Upvotes: 5

Related Questions