CODEWITHSUNDEEP
htmlcsscss-transitions
pkjboy
pkjboy

Reputation: 123

background zoom with css transitions not working


I am trying to add a css transition so when the a user hovers over a div the background zooms in like this https://codepen.io/mrsalami/pen/EpLZMe. However, the transition delay does not work.

My HTML:

<div class="what-we-do" id="home-block" style="background: url('http://www.intrawallpaper.com/static/images/1968081.jpg') center center no-repeat;">
  <div class="home-box-text">
    <h1>What We Do</h1>
  </div>
</div>

My CSS:

#home-block {
  width: 100%;
  transition-delay: 2s;
  -moz-transition-delay: 2s;
  -ms-transition-delay: 2s;
  -webkit-transition-delay: 2s;
  -o-transition-delay: 2s;
  height: calc((100vh - 133px)/ 3);
  -webkit-background-size: 100%;
  background-size: 100%;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#home-block:hover {
  background-size: 150% !important;
}
#home-block .home-box-text {
  margin: 0;
}
#home-block .home-box-text h1 {
  font-size: 30px;
  text-transform: uppercase;
}

#scroll-body {
  padding-left: 35px;
}

The codepen to my problem is https://codepen.io/mrsalami/pen/WKJRjr

Upvotes: 0

Views: 1156

Answers (6)

Shlizer
Shlizer

Reputation: 115

As all above mension you are overriding you styles inline. If you really must have URL of image inline try to separate all background attributes like this:

HTML:

<div class="what-we-do" id="home-block" style="background-image: url('http://www.intrawallpaper.com/static/images/1968081.jpg');">
    <div class="home-box-text">
        <h1>What We Do</h1>
    </div>
</div>

CSS:

#home-block {
    transition: all 2s ease;
    background-size: 100%;
    background-position: center center;
    background-repeat:  no-repeat;
    ...
}

Codepen: https://codepen.io/anon/pen/WKJjMW

Keep in mind that using !important in CSS is always a bad practice and if you must use it, you probably done something wrong there.

Upvotes: 0

Dhananjaya
Dhananjaya

Reputation: 412

You have to add background image in one css declaration. So without adding background image in inline statement add that as below.

#home-block {
    background: url('http://www.intrawallpaper.com/static/images/1968081.jpg') center no-repeat;
    width: 100%;
    height: 200px;
    color:#86A3B1;
    background-size: 100%;
    transition: all 3s ease;
    -moz-transition: all 3s ease;
    -ms-transition: all 3s ease;
    -webkit-transition: all 3s ease;
    -o-transition: all 3s ease;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center
}

#home-block:hover {
      background-size: 150%;
}

And HTML part as you done.

<body>
<div class="what-we-do" id="home-block">
  <div class="home-box-text">
    <h1>What We Do</h1>
</div>

This work fine for me. :)

Upvotes: 1

Turnip
Turnip

Reputation: 36662

You aren't defining a transition anywhere in your code. Only a transition delay.

Aside from this, your inline styles are overriding the styles defined in the hover state. Move the inline styles to the CSS.

Also, you should always define the non-prefixed properties after the prefixed version. This is important. The browser may use the experimental prefixed implementation instead of the standards compliant non-prefixed version if you don't have them in the correct order.

CodePen

#home-block {
  width: 100%;

  background: url("http://www.intrawallpaper.com/static/images/1968081.jpg") center center no-repeat;
  background-size: 100%;
  transition: all 1s ease;
  transition-delay: 1s;

  height: calc((100vh - 133px)/ 3);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#home-block:hover {
  background-size: 150%;
}

#home-block .home-box-text {
  margin: 0;
}

#home-block .home-box-text h1 {
  font-size: 30px;
  text-transform: uppercase;
}

#scroll-body {
  padding-left: 35px;
}
<div class="what-we-do" id="home-block" style="">
  <div class="home-box-text">
    <h1>What We Do</h1>
  </div>
</div>

If for some reason you need to keep the inline styles, then you could either include the background size as part of the declaration...

<div class="what-we-do" id="home-block" style="background: url('http://www.intrawallpaper.com/static/images/1968081.jpg') center center / 100% no-repeat; ">

CodePen

Or use !important in your default state CSS...

background-size: 100% !important;

CodePen

Upvotes: 0

Sakkeer A
Sakkeer A

Reputation: 1100

#home-block {
  width: 100%;
  height:150px;
  background: url("http://www.intrawallpaper.com/static/images/1968081.jpg") center center no-repeat;
  transition: all 2s ease;
  // height: calc((100vh - 133px)/ 3);
  background-size: 100%;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#home-block:hover {
  background-size: 150%;
}

#home-block .home-box-text {
  margin: 0;
}

#home-block .home-box-text h1 {
  font-size: 30px;
  text-transform: uppercase;
}

#scroll-body {
  padding-left: 35px;
}
<div class="what-we-do" id="home-block" style="">
  <div class="home-box-text">
    <h1>What We Do</h1>
  </div>
</div>

Upvotes: 1

Dicarva
Dicarva

Reputation: 75

You can change the image to background-image of the body in css like this:

#home-block {
    background:url(http://www.intrawallpaper.com/static/images/1968081.jpg) no-repeat;
    width: 100%;
    height: 200px;
    color:#86A3B1;
    background-size: 100%;
    transition: all 3s ease;
    -moz-transition: all 3s ease;
    -ms-transition: all 3s ease;
    -webkit-transition: all 3s ease;
    -o-transition: all 3s ease;
}

#home-block:hover {
    background-size: 150%;  
}

Upvotes: 1

Adam McMahon
Adam McMahon

Reputation: 800

Important to note that as well as setting your background image within CSS, you must also use transition: ease-in-out as opposed to transition-delay as you haven't actually set a transition yet.

Setting transition: ease-in-out and then setting transition-delayafterwards would give you an ease-in-out effect but it would add a 2 second delay before it started. The link you posted as your example shows this - https://codepen.io/mrsalami/pen/EpLZMe

Upvotes: 0

Related Questions