Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Move background image while hovering div

Move background image while hovering div

Problem

Any suggestions on how to accomplish a div containing a background image which is only visible while hovering. and while hovering i want the image to either zoom-in or move to the sides. Here is a jsfiddle of my current progress. http://jsfiddle.net/8P9UL/ Current code: HTML

 

Click

To send me an email

For business enquiries

Current code: CSS

.seg1{
-webkit-border-radius:400px;
border:1px solid #b1ebeb;
height:250px;
width:250px;
float:left;
background-color:#f1fbfb;
}
.seg1:hover{
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
background-image:url(img1.jpg); 
}

thank you in advance.

Problem courtesy of: Joel

Solution

There's also the option of using CSS animation. Support is roughly the same as CSS transition (http://caniuse.com/css-animation, http://caniuse.com/css-transitions), but the code is a bit longer (mostly because you'll have to add the -webkit prefix versions as well).

Demo: http://jsfiddle.net/32Qrb/3/

Relevant CSS:

.seg1{
-webkit-border-radius:400px;
border:1px solid #b1ebeb;
height:250px;
width:250px;
float:left;
background-color:#f1fbfb;
}

.seg1:hover{
    animation-duration: 3s;
    animation-name: zoomin;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 3s;
    -webkit-animation-name: zoomin;
    -webkit-animation-fill-mode: forwards;

    background-image:url('http://lorempixel.com/256/256'); 
    background-position: center;
}

@keyframes zoomin {
  from {
      background-size: 100%;
  }

  to {
      background-size: 200%;
  }
}

@-webkit-keyframes zoomin {
  from {
      background-size: 100%;
  }

  to {
      background-size: 200%;
  }
}
Solution courtesy of: freshtop

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Move background image while hovering div

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×