CSS 背景图片大小转换 [英] CSS Background image size transition

问题描述

I am working on a simple markup with resizing a div's background img. See the fiddle:

http://jsfiddle.net/zeYZL/

I need this to be animated with a simple CSS transition. and I tried doing this:

#tile:hover {
    background-size:550px 550px;
    background-position:-50px -50px;
    transition:all 0.5s ease;
    -webkit-transition:all 0.5s ease;
    -o-transition:all 0.5s ease;
    -moz-transition:all 0.5s ease;

}

But then the background image clips upon the hover. (See http://jsfiddle.net/5Hm9u/)

Any tips on how to fix it?

Greetings, Chris

解决方案

JSFiddle

You need to put background properties outside the hover too, so it knows what to return to when not on hover.

e.g.

.tile{
  float:left;
  margin:1px;
  width:450px;
  height:450px;
  overflow:hidden;
  background-size:450px 450px;
  background-position:0px 0px;
}

And if you want it to transition on mouseover and when you take the mouse off, you put the transition on .tile and not .tile:hover

JSFiddle

Side note

You should avoid using inline styles where you can use a stylesheet. Put your background image in .tile rather than using the style attribute.

Full CSS:

.tile{
  float:left;
  margin:1px;
  width:450px;
  height:450px;
  overflow:hidden;
  background-size:450px 450px;
  background-image:url(http://www.placehold.it/450x450);
  background-position:0px 0px;
  transition:all 0.5s ;
  -webkit-transition:all 0.5s ;
  -o-transition:all 0.5s ;
  -moz-transition:all 0.5s ;
}

.tile:hover {
  background-size:550px 550px;
  background-position:-50px -50px;
}

这篇关于CSS 背景图片大小转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！