img hover /text
Hallo Leute,
ich würde gerne wissen, wie ich einen Text über einem Bild erscheinen lasse (beim :hover).
Im HTML ist es ein a-tag, im CSS wird das img als background und der display:block Funktion eingebunden werden.
Der Text, soll nur beim :hover über dem Bild erscheinen.
Hat jmd eine Idee?
LG
Der hier verwendete Code
<style>
.testdiv {
width: 320px;
height: 150px;
border: 1px solid black;
}
.testdiv a {
width: 320px;
height: 150px;
background: url("/image/wm-2018-900.jpg");
background-size: 320px 150px;
display: block;
filter: grayscale(0) blur(0);
-webkit-transition: .3s linear;
transition: .3s linear;
}
.testdiv a:hover {
-webkit-filter: grayscale(100%) blur(3px);
filter: grayscale(100%) blur(3px);
}
.testdiv:hover>p{
display:block;
}
p {
text-align: center;
font-size: 40px;
position: absolute;
top:0px;
width:320px;
color:red;
display:none;
pointer-events:none;
}
</style>
<body>
<div class="testdiv">
<a href="#"></a>
<p> WM 2018 </p>
</div>
</body>