用css悬停时的效果图像

时间：2016-05-09 10:25:42

标签： html css

我试图在悬停时动画图像。我想要的结果与此类似：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;
}

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

感谢。

4 个答案:

答案 0 :(得分：0)

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

请更改课程和其他内容。你也可以赞扬该网站。

效果来自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>

答案 1 :(得分：0)

悬停部分使用box-shadow scale和transform 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;
}

Fiddle

答案 2 :(得分：0)

＆＃13;
＆＃13; 
    .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;
    }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

以下是小提琴中的答案：https://jsfiddle.net/uhdtv3nv/

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<div class="wrapper">
  <div class="item about-img-1">
    <div class="info">
      <h3>Some text</h3>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题