如何使图像随着悬停而淡化并显示文本？

Question

只有 HTML/CSS 个解决方案

我正在制作在线艺术作品集。每页上都有许多画作，垂直排列。很简单。

但是，当光标悬停在每幅画上时，我想要显示一些文字，要么导致画稍微褪色，要么文字出现在光标后面的小文本框中。

我会 post 我现在拥有的代码，但经过多次试验和错误后，我将其简化为简单的 div，其中包含 img。

Answer 1

您需要使用一些选择器魔法。请参阅随附的代码段和 CodePen。

下次，请 post 一些您尝试过的解决方案。没有人愿意只为您编写代码。

img.fade:hover /* fade out on hover */ {
  opacity:0.5;
}
img.fade + span /* hide spans immediately after images that are set to fade */ {
  visibility:hidden;
}
img.fade:hover + span /* display spans immediately after :hover faded images */ {
  visibility: visible;
}

<img class="fade" src="http://41.media.tumblr.com/d4473a971038c392b3e4ecb42e013784/tumblr_nlyfpjetVZ1tdg8rso7_500.jpg">
<span>Here is some Text</span>

参见 CodePen http://codepen.io/anon/pen/PPPqvM

如何使图像随着悬停而淡化并显示文本？

How to cause image to fade with hover and show text?

html

css

popup

fade

hover