HTML/CSS 图像翻转/动画，现有代码的具体情况，如何更改动画？

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

看起来您在这里没有处理图像，但是您在此处发布的 HTML/CSS 标记无法真正分辨出某种图标字体。如果您想对右下角的红色块进行任何更改，您必须对.team-photo figcaption a 进行一些更改，这是您可以为元素添加样式的部分。如果您想更改内容，可以这样做

<figcaption>
    <a href="#">
        <i class="gi gi-resize-full">HI</i>
    </a>
</figcaption>

您也可以使用小图标。

<figcaption>
    <a href="#">
        <img src="your-image.jpg">
    </a>
</figcaption>

如果图像比元素大，请确保您将使用一些新行更新 CSS：

.team .team-photo figcaption a img {
    width: 100%;
    height: auto;
}

希望这能让您顺利上路。

Answer 2

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

我为您制作了一个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 .team-photo figcaption a 的 right 和 bottom 的值。如果您想对您的 figcaption 进行特定更改，我想您可以向我们解释您想用它做什么。