CODEWITHSUNDEEP
jquerycssjquery-animate
Keith
Keith

Reputation: 26489

How to animate background image on hover with JQuery?

I have a square div with a diagonal image as the background.

When I hover over the div, I want the diagonal background image to expand, as shown below.

enter image description here

I have used CSS to accomplish this, but I want the transition to animate instead of "snapping".

<div class="content-box medium-box corner">
   <div>
   </div>
</div>

* { 
  margin: 0; 
  padding: 0; -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;}

.content-box {
  height: 250px;
  width: 250px;
  padding: 20px;
  margin-bottom: 25px;
  border: 1px solid #000;
  background: url(http://keithdonegan.com/wp-content/uploads/2017/02/corner-bg.svg) 0px 0px;
  background-size: cover;
  transition: all .8s;
}

.content-box:hover {
   background-size: 550px 550px;
   background-position: 0px 0px;
}

I would also the like background image to animate back to the original position when the cursor leaves the div.

Link to the test site.

Any ideas?

Upvotes: 0

Views: 765

Answers (3)

P. Frank
P. Frank

Reputation: 5745

If you add center center and easing for your animation it's fine. Please try:

* { 
  margin: 0; 
  padding: 0; -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;}

.content-box {
  height: 250px;
  width: 250px;
  padding: 20px;
  margin-bottom: 25px;
  border: 1px solid #000;
  background: url(http://keithdonegan.com/wp-content/uploads/2017/02/corner-bg.svg) 0px 0px;
  background-size: cover;
  background-position: center center;
  padding: 15px;
  position: relative;
  -webkit-transition:  all 0.8s ease 0s;
  transition:  all 0.8s ease 0s;
}

.content-box:hover {
   background-size: 350% 350%;
   background-position: 0px 0px;
}
<div class="content-box medium-box corner">
   <div>
   </div>
</div>

Upvotes: 0

Ronen Cypis
Ronen Cypis

Reputation: 21470

Here is a pure CSS solution for the problem as was describe in the question.

Notice that if you HAVE TO use a background image, it is possible to assign it to the ::before element, and still animate using the same CSS, without the use of js/jQuery...

As a best practice, always strive to keep your HTML as clean as possible (no redundant elements just for animations...), and try to avoid loading unneeded resources (images, scripts). It will keep your page much faster, and your code much easier to maintain. 

#frame {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 50px auto;
  border: solid 1px red;
  overflow: hidden;
}

#frame::before {
  content: "";
  position: absolute;
  top: 0px;
  left: -100px;
  width:100px;
  height:0;
  border-color: black;
  border-top: solid 100px black;
  border-right: solid 100px transparent;
  border-bottom: none;
  border-left: none;
  transition: left 1s;
}

#frame:hover::before {
  left: 0px;
}
<div id="frame"></div>

Upvotes: 1

Marcel Schmid
Marcel Schmid

Reputation: 424

you can make the transition animate with pure CSS.

To say if it is possible in your case I would need your code.

But check this for more information.

EDIT: use

background-size: 250px 250px;

instead of cover and the maigc is done

EDIT2:

.content-box {
  height: 250px;
  width: 250px;
  padding: 20px;
  margin-bottom: 25px;
  border: 1px solid #000;
  background: url(http://keithdonegan.com/wp-content/uploads/2017/02/corner-bg.svg) 0px 0px;
  background-size: 250px 250px;
  transition: all 5s;
}

.content-box:hover {
   background-size: 550px 550px;
   background-position: 0px 0px;
   transition: all 5s;
}

Upvotes: 0

Related Questions