basti1012.bplaced.net

Übersicht >> img hover /text
Du siehst gerade eine vereinfachte Darstellung unserer Inhalte. Normale Ansicht mit richtiger Formatierung.

img hover /text

2022-09-02 16:03:52
    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

    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>