将特定属性传递给选定 children

Question

我目前正在我的第一个网站上工作，我在尝试创建两个动画时遇到了问题。元素悬停时，将文本移动到图像上方（在此示例中为 "Krow Logo"），放大图像并更改其不透明度。到目前为止很棒。

问题是，我也想在此动画期间过渡一个小文本，元素 h3。这在我尝试过的所有方式中都不起作用。我认为这是继承问题，所以我尝试将 parent 的属性专门更改为它的第二个 child。运气不好。

我想在 h2（Krow 徽标）上保留 overflow:hidden 但不在 h3 上，因为我希望 h3 移到 parent 框之外。

非常感谢任何提示！

我摆弄了 :nth-child 尝试将属性 overflow:hidden 更改为可见

我已经尝试创建一个 grandparent 元素并将位置设置为 relative。

我试过 + ~ > 组合子的组合

None 个有效。

CSS


@import url(https://fonts.googleapis.com/css?family=Raleway:400,800);
figure.snip1104:first-child {
  font-family: 'Raleway', Arial, sans-serif;
  position: absolute;
  left:20%;
  overflow: hidden;
  margin: 10px;
  min-width: 220px;
  max-width: 310px;
  max-height: 220px;
  width: 100%;
  background: #000000;
  color: #ffffff;
  text-align: center;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}

figure.snip1104 h2 {
  position: absolute;
  left: 40px;
  right: 40px;
  display: inline-block;
  background: #000000;
  -webkit-transform: skew(-10deg) rotate(-10deg) translate(0, -50%);
  transform: skew(-10deg) rotate(-10deg) translate(0, -50%);
  padding: 12px 5px;
  margin: 0;
  top: 50%;
  text-transform: uppercase;
  font-weight: 400;
}

figure.snip1104:hover h2,
figure.snip1104.hover h2 {
  -webkit-transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
  transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
}

figure.snip1104 h3 {
    opacity:0;
  z-index: 5;
  position: absolute;
  left: 40px;
  right: 40px;
  display: inline-block; 
  padding: 12px 5px;
  margin: 0;
  top: 110px;
  overflow: visible;


}

figure.snip1104:hover h3,
figure.snip1104.hover h3{
    opacity:1;
    background-color:green;
    transform: translateY(200%);
}

HTML


<figure class="snip1104 blue">
    <img class="temp" src="/home/it21366/Desktop/liberty/tshirtblue.jpg" alt="sample33"/>
    <figcaption>
        <h2>Krow <span> Logo</span></h2>
        <h3>tesssst</h3>
    </figcaption>

    <a href="#"></a>
</figure>

我希望出现的效果是

tessst

溢出 parent 片段并保持可见，尽管移出其边界。相反，h3 消失了（移动到位置，但隐藏了）

Answer 1

不确定我是否明白你想要实现的目标，但如果 overflow 隐藏在父框中，那么你想要溢出的任何内容都将被隐藏，因为这就是 overflow: hidden 的含义.

如果我可能会问，你想以此为目标吗？

figure.snip1104:hover h2,
figure.snip1104.hover h2

Answer 2

好的，我创建了一个示例来说明您可以如何解决您遇到的问题（根据我对您问题的理解）。基本上，您为标题和图像创建一个容器，并根据容器的悬停状态控制 headings/image。

我已经取消了解决移动元素问题所必需的所有内容，因此您必须以有意义的方式将其应用到您自己的解决方案中（例如调整大小，display: none, 随心所欲).

还有一些方法可以使用 JavaScript 触发此操作，但我想展示一个仅 CSS 的解决方案。

如果您运行代码片段，您应该全屏查看它，否则它看起来很糟糕，因为我使用 view-port 单位作为页面高度。或者查看 codepen 并将编辑器放在左侧或右侧以获得更高的显示高度。

https://codepen.io/zenRyoku/pen/oRdYzB?editors=1100

@import url(https://fonts.googleapis.com/css?family=Raleway:400,800);

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Raleway', Arial, sans-serif;
}

.page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: slategray;
}

.main-heading,
.sub-heading {
  padding: 2rem;
  color: white;
  background: rgba(0,0,0,.6);
  transition: all 300ms;
  text-align: center;
}

.main-heading {
  transform: translateY(200%);
}

.sub-heading {
  opacity: 0;
}

.container:hover .main-heading {
  transform: translateY(0px);
}

.container:hover .sub-heading {
  opacity: 1;
  transform: translateY(-200%);
}

<div class="page">
  <div class="container">
    <h2 class="main-heading">Logo</h2>
    <img src="https://source.unsplash.com/400x300/?japan,sign"/>
    <h3 class="sub-heading">some other text</h3>
  </div>
</div>

将特定属性传递给选定 children

Passing SPECIFIC properties to selected children

html

css

overflow

tessst