HTML/CSS Image Rollover/Animation，现有代码的具体案例，如何更改动画？

Question

好的，我过去做过一些网络开发，但对“css/webkit”动画还很陌生。

我的网站上有一张图片，当用户“悬停”在图片上时，它会播放动画，如下所示:

我想做的是改变这个动画。

我想删除右下角的红色“箭头”图标。我想我想保持不透明度过渡，但是，如果用户将鼠标悬停在图像上，我想显示不同的图像。

这是图片的 HTML 代码:

<div class="col-md-4">

                            <div class="team" data-animation-name="fadeInRight">

                                <div class="team-photo">
                                    <figure>
                                        <img src="demo/team/dfds_seaways_ship.jpg" alt="">
                                        <figcaption>
                                            <a href="#">
                                                <i class="gi gi-resize-full"></i>
                                            </a>
                                        </figcaption>
                                    </figure>
                                </div>

这段代码不是我写的，所以很遗憾，我很迷茫。

我想我应该展示这里使用的“css-classes”。

    /* ==========================================================================
    Team
============================================================================= */
.team {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  margin-bottom: 30px;
}
.team .team-photo {
  position: relative;
  margin-bottom: 15px;
  overflow: hidden;
}
.team .team-photo figcaption {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  -webkit-transition: opacity 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: opacity 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  opacity: 0;
}
.team .team-photo figcaption a {
  display: block;
  position: absolute;
  z-index: 1;
  width: 44px;
  height: 44px;
  overflow: hidden;
  right: 0;
  bottom: 0;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background-color: #e35a55;
  -webkit-transform-origin: 100%;
  -moz-transform-origin: 100%;
  -ms-transform-origin: 100%;
  transform-origin: 100%;
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  -webkit-transition: -webkit-transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: -webkit-transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.team .team-photo figcaption a .fa,
.team .team-photo figcaption a .gi {
  width: 44px;
  height: 44px;
  line-height: 44px;
  font-size: 16px;
}
.team .team-photo figcaption a:hover {
  background-color: #000;
}
.team:hover .team-photo figcaption,
.team.touch .team-photo figcaption {
  opacity: 1;
}
.team:hover .team-photo figcaption a,
.team.touch .team-photo figcaption a {
  -webkit-transform: rotate(0);
  -ms-transform: rotate(0);
  transform: rotate(0);


.team .team-info {
  text-align: center;
  padding: 0 15px;
}
.team .team-name {
  margin: 0;
}
.team .team-data {
  display: none;
}

我尝试“只是”添加 onMouseOver 和 OnMouseOutEvents，尽管我不确定这是否是正确/最好的方法，如下所示:

<img src="demo/team/dfds_seaways_ship.jpg" alt="" onmouseover="this.src='demo/team/dfds_seaways_ship2.jpg'" onmouseout="this.src='demo/team/dfds_seaways_ship.jpg'">

但它不起作用。这是我的幼稚方法，利用我不久前的网络开发知识，但我想通过遵循本网站开发人员在此处采用的 CSS 方法来做到这一点。

老实说，我迷路了，所以如果有人能帮助我，或者向我解释如何使用可用的 CSS 代码轻松地做到这一点，我会非常高兴，这样我就能完成这件事。

如果需要更多信息，请告诉我。我希望上面(船的)gif 显示正常，在我的机器上它在 IE 上显示不正确，但在 chrome 上显示正常。

感谢所有帮助!

C

Answer 1

在你的情况下，我会在你的图像上放置一个图像并将其隐藏起来。然后将鼠标悬停在上面，使其可见。 imo 比添加 javascript 事件更好，而且比“display:none”更通用，您可以使用不透明度来更好地改变图像过渡。

我做了一个 FIDDLE 给你，这样你就可以看到一个例子。

这是我添加到你的 CSS 的:

.other-image {
    position:absolute;
    top:0;
    left:0;
    opacity:0;
    -webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;

}
.team:hover .other-image {
    opacity:1;
}

您可能会忽略这几行以使 figcaption 按预期工作(您可能已经在元素的任何地方使用了它):

figure {margin:0; position:relative;}
.team .team-photo {display:inline-block;} 
img {display:block;}

要删除 figcaption 很容易，如 figcaption {display:none} 或者，如果您想更改标题的位置，则更改 .team 中 right 和 bottom 的值.team-photo figcaption a.如果你想对你的 figcaption 进行特定的更改，我想你可以向我们解释你想用它做什么。