CODEWITHSUNDEEP
javascriptjqueryhtmlcss
EnexoOnoma
EnexoOnoma

Reputation: 8836

What is this jQuery "on-mouse-over-scroll-the-image" plugin?

I came across this functionality

http://themes.leap13.com/wiz/

where if you hover the mouse over a box, the image will start scrolling within that box.

How does this plugin is called? Any code examples on how to do it?

Upvotes: 1

Views: 1378

Answers (1)

dingo_d
dingo_d

Reputation: 11670

This can be achieved without any jquery. For instance

.screen {
  width: 500px;
  height: 300px;
  display: inline-block;
  margin: 10px;
  padding-top: 12px;
  position: relative;
  margin-bottom: 80px;
  text-decoration: none;
}
.screen div {
  display: inline-block;
  width: 500px;
  height: 300px;
  background-position: center top;
  -webkit-transition: all 2s;
  -moz-transition: all 2s;
  -ms-transition: all 2s;
  -o-transition: all 2s;
  transition: all 2s;
}
.screen:hover div {
  background-position: center bottom;
  -webkit-transition: all 10s;
  -moz-transition: all 10s;
  -ms-transition: all 10s;
  -o-transition: all 10s;
  transition: all 10s;
}
.screen h2,
.screen h2 a {
  font-size: 17px;
  color: #fff;
  font-weight: 300;
  position: absolute;
  bottom: -40px;
  text-align: center;
  width: 100%;
}
<div class="screen">
  <div style="background-image:url(http://themes.leap13.com/wiz/wp-content/uploads/2014/10/restaurant-wiz1.jpg);"></div>
  <h2>Some text</h2>
</div>

Basically all you need is a long image, and you add a transition on it to make it move up on hover (you're changing background position).

You could add easing to this, delay on hover, what ever your heart desires :D (within the realm of available CSS3 code ofc).

Upvotes: 8

Related Questions