Question

这是一个两部分问题。第一部分是我希望图像淡入淡出，文本淡入淡出同时发生（悬停在上面）。

第二部分是，我想如果我在<p>内部有<div>标签，那么它会继续＆＃34;继承＆＃34; （我可能没有正确使用这个术语）div属性。文本应该保持固定的图像中心，因此无论何时图像调整大小或移动它都需要文本。

显然，这些事情都没有发生。

＆＃13;

.image-wrapper p {
  position: absolute;
  left: 250px;
  top: 130px;
  padding: 10px;
  border: 1px solid #FFF;
  opacity: 0;
}
.image-wrapper p:hover {
  position: absolute;
  left: 250px;
  top: 130px;
  padding: 10px;
  border: 1px solid #FFF;
  opacity: 100;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}
.fade {
  opacity: 1;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}
.fade:hover {
  opacity: 0.5;
}

＆＃13;

<div class="image-wrapper">
  <img src="http://placehold.it/150x80?text=IMAGE" class="fade" style="width:100%" alt="Image">
  <p>This text here</p>
</div>

＆＃13;

here

Answer 1

首先你可以像那样使用

.image-wrapper:hover{
  opacity :0.7;
}

Answer 2

1.）和2.） - 试试这段代码：

<小时/> HTML：

<div class="image-wrapper">
    <img src="http://placehold.it/150x80?text=IMAGE" class="fade" style="width:100%" alt="Image">
    <p class="fade">This text here</p>
</div>

将class="fade"添加到<p>也可以使文本顺利过渡。

CSS：

.image-wrapper p {
    display: none;
    color: #F00;
    position: absolute;
    left: 250px;
    top: 130px;
    padding: 10px;
    border: 1px solid #FFF;
    opacity: 0;
}

.image-wrapper p:hover, .image-wrapper:hover p {
    display: block;
    position: absolute;
    left: 250px;
    top: 130px;
    padding: 10px;
    border: 1px solid #FFF;
    opacity: 100;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}

// When either hovering the p or the image, apply the transition.

.fade {
    opacity: 1;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}
.fade:hover {
    opacity: 0.5;
}

Answer 3

检查一下，让我知道您的反馈。谢谢！

第一部分是我希望图像淡入淡出，文字淡入淡出同时发生（悬停在上面）。

要做到这一点，请将hover添加到image-wrapper，而不是单独添加到p和img，例如：

.image-wrapper:hover p {
  opacity: 1;
}

.image-wrapper:hover .fade {
  opacity: 0.5;
}

文本应该随时保留在图像的固定中心   图像调整大小或移动它会带来文本。

为此，您可以使用transform对文本居中对齐图像。

.image-wrapper p {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

以下片段：

.image-wrapper{
  position: relative;
  }

.image-wrapper p {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
  border: 1px solid #FFF;
  opacity: 0;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}
.image-wrapper:hover p {
  opacity: 1;
}
.fade {
  opacity: 1;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;

}
.image-wrapper:hover .fade {
  opacity: 0.5;
}

<div class="image-wrapper">
  <img src="http://placehold.it/150x80?text=IMAGE" class="fade" style="width:100%" alt="Image">
  <p>This text here</p>
</div>

div标签内的p标签

3 个答案: