Question

我的图像上面有一段文字。图像设置为缩放并在悬停时变为颜色，文本是指向网站的链接。如何将文本和图像制作成一个元素＆＃34;，这样当我将鼠标悬停在文本上时，图像会扩展并转变为颜色，而不必将鼠标悬停在图像本身上？

可能没有解决方案，但因为我能想到的唯一其他选择是使图片和文字的图像相当粗糙，我感谢任何帮助。

相关守则：

＆＃13;

img.color_flip {
  filter: url(filters.svg#grayscale);
  /* Firefox 3.5+ */
  filter: gray;
  /* IE5+ */
  -webkit-filter: grayscale(1);
  /* Webkit Nightlies & Chrome Canary */
  -webkit-transition: all .3s ease-in-out;
}
img.color_flip:hover {
  filter: none;
  -webkit-filter: grayscale(0);
  -webkit-transform: scale(1.02);
}
* {
  padding: 40;
  margin: 40;
}
#over {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
}
.Centered {
  display: inline-block;
  vertical-align: middle;
}
.imgWrap {
  position: relative;
}
.imgDescription {
  position: center;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  color: #afafaf;
  font-size: 15px;
}

＆＃13;

<div id="over">
  <div class="imgWrap">
    <div>
      <a href="http://prxnt.org/faces.html">
        <span class="imgDescription" position="bottom" style="margin-top:10px">Shop summer tees
         </span>
      </a>
    </div>
    <img class="color_flip" class="Centered" src="https://i.imgsafe.org/7ab99a5.jpg" width="707" style="margin-top:10px;">
  </div>
</div>

＆＃13;

Answer 1

所以我不知道如何重新找回你想要的东西，但我确实做了这个jsfiddle：

text and image hover

基本上我用过：

.image-box p:hover ~ img {
  width:200px;
}

在段落悬停时选择img。它独立于悬停在图像上而对图像应用效果。这有点粗糙，但效果就在那里。这是你想要的吗？

Answer 2

你的描述到处都是......我无法跟进。所以我制作了一个div和一堆CSS：

使用background: url(https://domain.com/path/to/img.png) no-repeat;和background-size: contain将图像用作背景并保持纵横比（即尽可能远地拉伸到边缘而不会扭曲图像。）
使用transition: color .2s ease-out, font-size 1s ease-in;为文字的颜色淡入和增长字体设置动画。
在:hover上，您只需根据需要指定颜色和字体大小即可。当没有悬停在文本上时，颜色是透明的，只有8px。如果它停留在动画上（transition），则文字为海军蓝色和48px字体大小。

段

＆＃13;

.img {
  background: url(https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png) no-repeat;
  background-size: contain;
  height: 256px;
  width: 256px;
  text-align: center;
  color: transparent;
  font-size: 8px;
  font-variant: small-caps;
  font-family: 'Palatino Light';
  -webkit-transition: color .2s ease-out, font-size 1s ease-in;
  transition: color .2s ease-out, font-size 1s ease-in;
  cursor: pointer;
}
.img:hover {
  color: navy;
  font-size: 48px;
  padding-top: 5%;
}

＆＃13;

<div class="img">.::Lenna::.</div>

＆＃13;

如何让文字影响图像？

2 个答案:

段