Html 如何使文本影响图像？

我有一个上面有一段文字的图像。当鼠标悬停在图像上时，图像被设置为按比例缩放并变为颜色，文本是指向站点的链接。如何使文本和图像成为一个“元素”，这样当我将鼠标悬停在文本上时，图像将独立于必须将鼠标悬停在图像本身上而展开并变为颜色

可能没有办法解决这个问题，但因为我能想到的唯一其他选择是将图片和文本制作成一张相当粗糙的图片，我将非常感谢能得到的任何帮助

相关代码：

img.color\u翻转{
过滤器：url（filters.svg#grayscale）；
/*Firefox 3.5+*/
过滤器：灰色；
/*IE5+*/
-webkit过滤器：灰度（1）；
/*Webkit睡衣和铬金丝雀*/
-webkit过渡：所有.3s易于输入输出；
}
图像颜色翻转：悬停{
过滤器：无；
-webkit过滤器：灰度（0）；
-webkit转换：比例（1.02）；
}
* {
填充：40；
保证金：40；
}
#结束{
位置：绝对位置；
宽度：100%；
身高：100%；
文本对齐：居中；
}
.居中{
显示：内联块；
垂直对齐：中间对齐；
}
伊姆格拉普先生{
位置：相对位置；
}
.说明{
位置：中心；
字体系列：“蒙特塞拉特”，无衬线；
字体大小：400；
颜色：#afafaf；
字体大小：15px；
}

---

所以我不知道如何重新创建您正在寻找的内容，但我确实制作了以下JSFIDLE：

基本上我用了：

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

---

将段落悬停在上方后选择img。它对图像应用效果，而不必将鼠标悬停在图像上。虽然有点粗糙，但效果确实存在。这是你想要的吗

你的描述到处都是……我听不懂。所以我做了一个div和一堆CSS：

• 使用

  background:url(https://domain.com/path/to/img.png)不重复

  和

  背景大小：包含

  以使用图像作为背景，并保持纵横比（即尽可能拉伸到边缘而不扭曲图像）

• 使用

  transition:color.2s减轻，字体大小1s减轻设置文本颜色淡入和字体增长的动画
  

• 在<代码>：悬停上，您只需根据需要指定颜色和字体大小即可。不悬停在文本上时，文本颜色是透明的，仅为8px。当它悬停在动画上时（

  transition

  ）开始生效，文本为海军蓝，字体大小为48px

一小条

.img{
背景：url(https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png)不重复；
背景尺寸：包含；
高度：256px；
宽度：256px；
文本对齐：居中；
颜色：透明；
字号：8px；
字体变体：小大写字母；
字体系列：“Palatino Light”；
-webkit过渡：颜色。2缓出，字体大小1缓入；
过渡：颜色。2放松，字体大小1放松；
光标：指针；
}
.img:悬停{
颜色：海军蓝；
字体大小：48px；
垫面：5%；
}

---

Lenna:：。是的，这太完美了！非常感谢，没问题！祝你好运