Move background image while hovering div

Question

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 my current progress.

.seg1 p:first-child {
  font-size: 20px;
  padding: 0;
  margin: 10% 0% 0% 10%;
}

.seg1 p {
  color: #363e3e;
  font-size: 32px;
  margin: 0% 0% 0% 10%;
}

.seg1 p:nth-child(3) {
  color: #ccc;
  font-size: 25px;
  margin: 0% 0% 0% 10%;
}

.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(https://via.placeholder.com/350/000000/FFFFFF/?text=BackgroundImage);
}

<div class="seg1">
  <p> test </p>
  <p> dont </p>
  <p> bother </p>


</div>

thank you in advance.

The answer might get broken in the future

Embedding a working example here instead.

.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('https://via.placeholder.com/350/000000/FFFFFF/?text=Background-image');
  background-position: center;
}

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

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

<div class="seg1">
  <p>Click</p>
  <p>To send me an email</p>
  <p>For business enquiries</p>
</div>

Abhitalks · Accepted Answer · 2014-05-30 13:38:43Z

6

Demo: http://jsfiddle.net/abhitalks/xE4q4/

Its advisable to define your transition in the base class and not on the :hover or other change pseudo-class.
Specify a background on the element in the base class itself.
Just specify what change you want in your :hover pseudo-class.

Relevant CSS:

.seg1 {
    border-radius: 50%;
    border: 1px solid #b1ebeb;
    height: 250px; width: 250px;
    text-align: center;
    background: url('your image') no-repeat center center #f1fbfb;
    background-size: 0px;
    transition: all 1s ease-in-out;
}
.seg1:hover {
    background-size: 100%;
}

answered May 30, 2014 at 13:38

Abhitalks

28.5k6 gold badges61 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

freshtop · Accepted Answer · 2014-05-31 03:40:02Z

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%;
  }
}

reyaner · Accepted Answer · 2014-05-30 13:38:27Z

3

you could try this for example:

http://jsfiddle.net/3q9ex/

background-position: -100px center;

And play with this:

background-size: cover;

answered May 30, 2014 at 13:38

reyaner

2,8091 gold badge14 silver badges18 bronze badges

Collectives™ on Stack Overflow

Move background image while hovering div

The answer might get broken in the future

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

The answer might get broken in the future

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related