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

Kommentar abgeben zu diesen Beitrag/Code ?
Dann hier klicken

Der hier verwendete Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
    <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;
}
 
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX