javascript - 悬停背景图像上的 "Ken Burns effect"？

Question

我有一个父 div，其宽度为 30%，高度为 100%，背景图像设置为覆盖。

我想要的是，当我将鼠标悬停在这个 div 上时，我想在背景上创建一个“Ken Burns effect”...

目前这是我的 CSS 代码:

.col1 {
    margin-left : 20%;
    width : 26.66%;
    float : left;
    height : 100%;
    background : 
        linear-gradient(
            rgba(0, 0, 0, 0.3), 
            rgba(0, 0, 0, 0.3)
        ),
        url(images/rave.jpg);
    background-size : cover;
    background-position : left;
    opacity : 1;
    background-color : black;
}

任何想法，或者如果有人能指出我正确的方向，那就太好了。

Answer 1

这是您要查找的内容:http://codepen.io/hkfoster/pen/kechC

CSS

/* Better box-sizing */
* { box-sizing: border-box; }

/* 1rem = 10px */
html { font-size: 62.5%; }

/* Default body */
body { 
  margin: 0; 
  opacity: 0;
  font: 1.6rem/1.875 'Avenir Next', sans-serif;
}

/* Loaded body */
body.loaded {
  opacity: 1;
  transition: 1s opacity;
}

/* Default banner */
.banner {
  position: relative;
  width: 100%;
  height: 40rem;
  padding: 0 5%;
  overflow: hidden;
  backface-visibility: hidden;
}

/* Default image container */
.banner .background {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  transform: translate3d(0,0,0) scale(1.25);
  background: black url(https://dl.dropboxusercontent.com/u/150679257/hazy.jpg) no-repeat center center; 
  background-size: cover;
}

/* Loaded image container */
.loaded .banner .background {
  transform: scale(1);
  transition: 6.5s transform;
}

/* Other stuff */
.banner h1 {
  color: #EEE;
  margin: 0;
  line-height: 40rem;
  text-transform: uppercase;
  text-shadow: 0 0 .3rem black;
}

main { 
  width: 90%;
  margin: 5rem auto;
}

main p { margin: 0 0 3rem 0; }

JS

// Trigger class name on load
window.onload = function() {
  document.body.className += ' loaded'
};