Question

我正在尝试复制使用的菜单设计：

https://www.pandaexpress.com/menu/appetizers

我认为我需要使用javascript / jquery，但我很新，不确定下一步。当用户将鼠标悬停在图像上时，图像似乎滑动到焦点并在下面显示信息。我试图将它分离为单独的动作，由以下jfiddles建模：

https://jsfiddle.net/Lrqu8L0q/3/（在悬停时放大并聚焦图像） https://jsfiddle.net/4ud7wnop/1/（向下滑动以显示悬停时的文字）

我尝试将它们组合起来，但是当我添加

时

<p>This text is displayed on a downward slide after hover</p>

第一个jfiddle段落没有被隐藏。

现在我在试图想出一种将两者结合起来的方法时遇到了麻烦。我想我需要使用javascript / jquery创建一个函数，在图像放大完成后应用向下滑动显示文本。我对整个网页设计都很陌生，对javascript和jquery特别不满意。

我想知道我是否可以编写一个函数来检查图像是否已经放大了，并且在达到所需的高度/宽度后运行文本幻灯片功能。真的不知道该怎么做..有人能指出我正确的方向吗？

Answer 1

我在这里将它们合并在一起：https://jsfiddle.net/danbovey/53ya31gm/

主要问题是，您需要将图像放大以覆盖您可能拥有的任何细节文本。

我评论过我在小提琴中添加的大部分更改。但这是关键部分：

我将bg元素重命名为tile，这似乎更合适。我没有使用height .slide-down类，而是在磁贴悬停时对细节div进行了转换。

.tile:hover .details {
    transform: translateY(150%);
}

您可以在此处了解CSS转换：http://css3.bradshawenterprises.com/transforms/

变换的百分比可以计算为img的高度/细节的高度 - 300px / 200px = 150%

为了创建增长效果，伪:before元素在图块之前添加与图像大小相同的白色区域，并且当悬停时，在每个边缘周围增长到25px。并且在细节div中添加了相同的元素。

.tile:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #FFF;
  transition: all 0.4s ease;
  content: '';
}

.tile:hover:before {
  top: -25px;
  left: -25px;
  width: calc(100% + 50px);
  height: calc(100% + 50px);
}

Answer 2

这是你想要的吗？ https://jsfiddle.net/Lrqu8L0q/9/

.thumbnail{
  width: 100px;
  height: 100px;
  display:block;
  z-index:999;
  cursor: pointer;
  -webkit-transition-property: all;
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: ease;
  margin: 0 auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%); 
  border-radius: 2px;
}
.bg:hover {
    transform: scale(1.25)
}
.bg{
  width: 150px;
  height: 110px;
  background-color: teal;
  border-radius: 2px;
}
.slide-down {
  border-radius: 3px;
  height: 60px;
  width: 150px;
  position: relative;
  transition: height 0.3s;
  -webkit-transition: height 0.3s;
  text-align: center;
  overflow: hidden;
  background-color: teal;
}
.bg:hover .slide-down {
  height: 140px;
}
.container{
  position: relative;
  left: 150px;
  top: 50px;
}

<div class="container">
  <div class="bg">
    <img src="https://static.pexels.com/photos/70497/pexels-photo-70497.jpeg" class="thumbnail"/>
    <div class="slide-down">
      <h2>Title</h2> 
      <p>This text is displayed after a downward slide on hover</p>
    </div>
  </div>
</div>

基本上你需要做的就是将你的要求放在一个组合对象中（在这里我的意思是将Image＆amp; Text放在1个容器中），如上例所示

<div class="bg">
    <img src="https://static.pexels.com/photos/70497/pexels-photo-70497.jpeg" class="thumbnail"/>
    <div class="slide-down">
        <h2>Title</h2> 
        <p>This text is displayed after a downward slide on hover</p>
    </div>
</div>

它们都放在1个带有.bg类的容器中，然后你想要的是hover 容器（不是缩略图或描述本身）并触发两者scaling＆amp; slide-down菜单详细信息，您可以通过添加CSS

来完成此操作

.bg:hover { ... }

对于scaling，您需要将其与container放在一起，以便将所有内部元素缩放到，然后对于其中的描述，您需要使用

.bg:hover slide-down { ... }

这是您设置将展开菜单说明的动画的位置（为了便于说明，此CSS将在.bg悬停时触发，并应用于内部的元素.slide-down它）

如何结合两个CSS动画

2 个答案: