Nick Nick - 5 months ago 20
CSS Question

css - animation hover effect on background-image

I'm trying to add an animation effect on an image used as a

background
in css.

Here's the css:

{
color: inherit;
text-decoration: none;
height: 100%;
width: 100%;
display: block;
background: url('http://placehold.it/350x150')no-repeat top center;
background-size: cover !important;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-ms-background-size: 100% 100%;
transition: all 0.3s ease-in 0s;
-webkit-transition: all 0.3s ease-in 0s;
-moz-transition: all 0.3s ease-in 0s;
-ms-transition: all 0.3s ease-in 0s;
}

a.mf-portfolio-image-container:hover{
background-size: 120% !important;
//transform: grow(1.072, 1.072);
//-webkit-transform: scale(1.072, 1.072);
//-moz-transform: scale(1.072, 1.072);
//-ms-transform: scale(1.072, 1.072);
}


Now, on hover, I'm trying to scale the
background-size
a bit (grown effect) but it's not working.

All I have is the background increasing in size but without the animation (or anyway, scale it smoothly)

I've read some articles, but they are all talking about this effect applied not on
background-image
, but on an image in the HTML.

here's a quick fiddle

any idea on how to properly achieve this type of effect?

Answer

you have 2 things wrong in your code,

  • 1st

you have an extra double quote " after the background which make the rest of the CSS below invalid, therefore the transition, won't work

  • 2nd

you can't have background-size:cover and background-size:100% at the same time, it only parse the last one that was added in CSS.

Note:

Comment Syntax: in CSS this // doesn't work, use /* */

.row {
  padding: 50px;
}
.mf-portfolio-page {
  margin-bottom: 30px;
  height: 150px;
  width: 350px;
  position: relative;
  padding: 0;
}
a.mf-portfolio-image-container {
  color: inherit;
  text-decoration: none;
  height: 100%;
  width: 100%;
  display: block;
  background: url('http://placehold.it/350x150')no-repeat top center;
  background-size: 100%;
  transition: all 0.3s ease-in 0s;
}
a.mf-portfolio-image-container:hover {
  background-size: 120%;
  /*transform: grow(1.072, 1.072);
  -webkit-transform: scale(1.072, 1.072);
  -moz-transform: scale(1.072, 1.072);
  -ms-transform: scale(1.072, 1.072); */
}
<div class="row">
  <div class="col-md-4 col-lg-4 col-sm-4 col-xs-4 mf-portfolio-page">
    <a href="#" class="mf-portfolio-image-container">
      <div class="mf-portfolio-image-container-description">
        title
      </div>
    </a>
  </div>
</div>