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

Question

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

我的网站上有一张图片，当用户 "hovers" 在图片上方时会播放动画，如下所示：

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

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

这是图像的 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;
}

我尝试 "just" 添加 onMouseOver 和 OnMouseOutEvents，尽管我不确定这是否是 right/best 的方式，例如：

<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" 更通用，您可以使用不透明度来更好地改变图像过渡。

我已经为你做了一个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;
}

您可以忽略这几行以使无形字幕按预期工作（您可能已经在项目的任何地方使用了这几行）：

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

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

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

HTML/CSS Image Rollover/Animation, specific case with existing code, how to change animation?

html

css

image

web

web-deployment