Css 元素悬停时显示标题

我现在正在开发，我的目标是添加以下功能：

• 将鼠标悬停在单个图像上时，我希望显示标题中包含的标题
• 交互应该从颜色栏过渡并具有相同的背景

我认为这可能仅用CSS就可以实现，但我很难想象标记是如何工作的。如果您有任何建议或建议，我们将不胜感激。

请尝试以下jQuery：

$(function() {
    $('img').hover(function() {
        var title = $(this).attr('title');
    }, function() {
    });
});

---

您可以使用

背景图像制作
div
，并在标题内制作
h1
（标题）；然后使用
：hover
伪类将标题的不透明度从
0
更改为
1

HTML:

这可以通过CSS3完成

我想这正是我想要的，但之前没有见过这种方法，谢谢！请添加一个fiddle或代码，因为很快，您将解决问题，然后您的问题将没有历史价值这将不起作用，因为您所做的唯一事情是在hover上创建一个变量并调用一个不起任何作用的函数
<div>
    <h1>Title Here</h1>
</div>

div {
    background-image: url('image_here.jpg');
}

h1 {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
}

p:hover {
    opacity: 1;
}

a > h3 {
    width: 100%;
    display: block;
    position: absolute;
    bottom: -1.5em;
    color: white;
    background-color: #993434;
    padding: 0.4em;
    box-sizing: border-box;

    -webkit-transition: all 300ms ease-in;
        -moz-transition: all 300ms ease-in;
        -ms-transition: all 300ms ease-in;
        -o-transition: all 300ms ease-in;
        transition: all 300ms ease-in;
}

a:hover > h3 {
    bottom: 0;
}