使用CSS在悬停效果图像

Question

我正在尝试对悬停时的图像进行动画处理。 我想要的结果与此相似： 请参见此处 （滚动查看图像“我们的团队”）

因此，我想有一个背景，可以像本主题一样显示一些信息（名称，链接），但我无法实现。

这是我的代码：

<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

您需要学习如何复制代码。 哈哈！

请更改班级和其他内容。 您也可以在该网站上功劳。

效果来自CSS scale 。

 .item { width: 225px; height: 225px; margin: 15px auto; border-radius: 50%; position: relative; cursor: default; box-shadow: inset 0 0 0 15px rgba(244, 245, 247, 0.5); -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-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; } .item .info { position: absolute; background: rgba(82, 219, 235, 0.8); width: inherit; height: inherit; border-radius: 50%; opacity: 1; -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; } .about-img-1 { background-image: url(https://www.gravatar.com/avatar/f44f4e56cd6b6a152f0dcfc8412b7069?s=328&d=identicon&r=PG); } .visible-xs { display: none!important; } .img-circle { border-radius: 50%; } .item .info h3 { color: #f4f5f7; font-size: 24px; margin: 0 30px; padding: 45px 0 0 0; height: 120px; } .item .info p { color: #f4f5f7; color: rgba(244, 245, 247, 0.8); padding: 10px 5px; font-style: italic; margin: 0 30px; font-size: 14px; border-top: 1px solid rgba(244, 245, 247, 0.5); opacity: 0; -webkit-transition: all 0.4s ease-in-out 0.4s; -moz-transition: all 0.4s ease-in-out 0.4s; -o-transition: all 0.4s ease-in-out 0.4s; -ms-transition: all 0.4s ease-in-out 0.4s; transition: all 0.4s ease-in-out 0.4s; } .item .info .list-inline { font-size: 18px; } .item .info ul { opacity: 0; -webkit-transition: all 0.4s ease-in-out 0.4s; -moz-transition: all 0.4s ease-in-out 0.4s; -o-transition: all 0.4s ease-in-out 0.4s; -ms-transition: all 0.4s ease-in-out 0.4s; transition: all 0.4s ease-in-out 0.4s; } .list-inline { padding-left: 0; margin-left: -5px; list-style: none; } .item:hover { box-shadow: none; } .item:hover .info { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; } .item:hover .info ul { opacity: 1; } 

 <div class="item about-img-1"> <div class="info"> <!-- Mobile Fallback Image --> <img class="img-responsive img-circle visible-xs" src="https://www.gravatar.com/avatar/f44f4e56cd6b6a152f0dcfc8412b7069?s=328&d=identicon&r=PG" alt=""> <!-- Name / Position / Social Links --> <h3>Kalpesh Singh</h3> <p>KnowKalpesh.in</p> <ul class="list-inline"> <li><a class="light-text" href="#"><i class="fa fa-facebook fa-fw"></i></a> </li> <li><a class="light-text" href="#"><i class="fa fa-linkedin fa-fw"></i></a> </li> <li><a class="light-text" href="#"><i class="fa fa-twitter fa-fw"></i></a> </li> </ul> </div> </div> 

Answer 2

悬停部分使用box-shadow和scale transform属性以及CSS transitions 。

这是带有网站示例代码和相关CSS部分的结果。

.item {
    width: 225px;
    height: 225px;
    margin: 15px auto;
    border-radius: 50%;
    position: relative;
    cursor: default;
    box-shadow: inset 0 0 0 15px rgba(244, 245, 247, 0.5);
    -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-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}
 .item {
    margin: 30px;
}
.about-img-1 {
    background-image: url(http://themes.startbootstrap.com/spectrum-v1.2.0/assets/img/demo-portraits/portrait-1.jpg);
}
.img-circle {
    border-radius: 50%;
}
.item>a>img, .item>img, .img-responsive, .thumbnail a>img, .thumbnail>img {
    display: block;
    max-width: 100%;
    height: auto;
}
img {
    -webkit-backface-visibility: hidden;
    width: auto\9;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic;
}

.item .info h3 {
    color: #f4f5f7;
    font-size: 24px;
    margin: 0 30px;
    padding: 45px 0 0 0;
    height: 120px;
}
.item .info {
    position: absolute;
    background: rgba(82, 219, 235, 0.8);
    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;
}

.item:hover .info {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}
.item:hover {
    box-shadow: none;
}

小提琴

Answer 3

  .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> 

Answer 4

这是小提琴为您提供的答案： https : //jsfiddle.net/uhdtv3nv/

 .wrapper { width: 100%; height: 100%; background-color: blue; } .item { width: 225px; height: 225px; margin: 15px auto; border-radius: 50%; position: relative; cursor: default; box-shadow: inset 0 0 0 15px rgba(244, 245, 247, 0.5); -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-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; background-image: url('http://iconshow.me/media/images/ui/ios7-icons/png/512/person_1.png'); } .item:hover { box-shadow: none; } .item:hover .info { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; } .info { position: absolute; background: rgba(82, 219, 235, 0.8); 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; } .item h3 { padding: 80px 70px; } 

 <div class="wrapper"> <div class="item about-img-1"> <div class="info"> <h3>Some text</h3> </div> </div> </div>