html - 使用css悬停效果图像

Question

我正在尝试在悬停时为图像制作动画。我想要的结果类似于这个:See here (滚动查看图像“我们的团队”)

所以，我想要一个可以显示一些信息(名称、链接)的背景，就像在这个主题中一样，但我无法实现。

这是我的代码:

<div class="row">
  <div class="col-md-6">        
    <div class="picture">
      <div class="photoapropos center-block">
        <div class="info">
          <img class="img-responsive img-circle" alt="Name" src="<?= $url; ?>"/>
          <p>Name</p>
        </div>
      </div>    
    </div>  
  </div>
</div>

还有我的 CSS:

.picture {
  display: block;
  opacity: 1;
}
.photoapropos{
  display: block;
  position: relative;
  width: 425px;
  height: 425px;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.photoapropos:hover .info {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}
.photoapropos .info {
  position: absolute;
  background: #FF8C00;
  width: inherit;
  height: inherit;
  border-radius: 50%;
  opacity: 0;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -o-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-backface-visibility: hidden;
}

任何人都可以帮助我，因为这个功能似乎很容易实现，但我不明白我错过了什么？

谢谢。

Answer 1

    .picture {

        display: block;
        opacity: 1;
        background:url('http://themes.startbootstrap.com/spectrum-v1.2.0/assets/img/demo-portraits/portrait-4.jpg');
        border-radius: 50%;
        height: 425px;
        width: 425px;
    }

    .photoapropos{
        display: block;
        position: relative;
        width: 425px;
        height: 425px;
        -webkit-transition: all 0.4s ease-in-out;
        -moz-transition: all 0.4s ease-in-out;
        -o-transition: all 0.4s ease-in-out;
        -ms-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;

    }

    .photoapropos:hover .info{


        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }

    .photoapropos .info {
        position: absolute;
        /*background: #FF8C00;*/
        width: inherit;
        height: inherit;
        border-radius: 50%;
        opacity: 0;
        -webkit-transition: all 0.4s ease-in-out;
        -moz-transition: all 0.4s ease-in-out;
        -o-transition: all 0.4s ease-in-out;
        -ms-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -o-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0);
        -webkit-backface-visibility: hidden;
        text-align: center;

        background: rgba(82, 219, 235, 0.8);
        color: #fff;
    }

    .photoapropos .info p {
        margin-top: 50px;
    }

<div class="row">
    <div class="col-md-6">
        <a class="picture" href="<?= $url; ?>">
            <div class="photoapropos center-block">
                <div class="info">
                    <p>Name</p>
                </div>
            </div>
        </a>
    </div>
</div>