如何使文本影响图像

Question

我有一个图像，上面有一段文本。当悬停在上面时，图像被设置为按比例缩放并变为彩色，文本是指向网站的链接。如何使文本和图像成为一个"元素"，以便当我将鼠标悬停在文本上时，图像会展开并变为彩色，而不必将鼠标悬停于图像本身？

对此可能没有解决方案，但因为我能想到的唯一其他选择是将图片和文本制作成一个相当粗糙的图像，所以我很感激能得到的任何帮助。

相关代码：

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;
}

<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>

Answer 1

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

文本和图像悬停

基本上我用过：

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

以在段落悬停时选择img。它将效果应用于图像，而与悬停在图像上无关。这有点粗糙，但效果是存在的。这是你想要的吗？

Answer 2

你的描述到处都是。。。我无法跟上。所以我做了一个div和一个crawfload的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。

摘录

.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%;
}

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