Es ist möglich, einen animierten Text über einem verblassten Bild beim Hover mit CSS zu erstellen.
Wenn Sie mit der Maus über das Bild bewegen und der Text animiert erscheint, dann sind Sie hier richtig! Mal sehen, wie wir das Schritt für Schritt machen können.
Die nächste Eigenschaft, die eingestellt werden muss, ist die Eigenschaft transition, die die Werte des Elements in Millisekunden ändert.
Im angegebenen Beispiel verblasst der Übergang das Bild langsam, in 400 Millisekunden, wenn Sie mit der Maus über das Bild bewegen. Wenn Sie die Eigenschaft transition nicht angeben, gibt es keinen Effekt und das Bild wird schnell verblassen.
Es werden auch die Eigenschaften transition-delay und transition-durationverwendet. Die erste gibt den Startvorgang an und die zweite gibt die Zeit an, die der Text benötigt, um von oben nach unten zu wechseln.
Lassen Sie uns die Schritte mit diesem Beispiel anzeigen:
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
.example{
position:relative;
padding:0;
width:300px;
display:block;
cursor:pointer;
overflow:hidden;
}
.content {
opacity:0;
font-size: 40px;
position:absolute;
top:0;
left:0;
color:#1c87c9;
background-color:rgba(200,200,200,0.5);
width:300px;
height:300px;
-webkit-transition: all 400ms ease-out;
-moz-transition: all 400ms ease-out;
-o-transition: all 400ms ease-out;
-ms-transition: all 400ms ease-out;
transition: all 400ms ease-out;
text-align:center;
}
.example .content:hover { opacity:1; }
.example .content .text {
height:0;
opacity:1;
transition-delay: 0s;
transition-duration: 0.4s;
}
.example .content:hover .text {
opacity:1;
transform: translateY(250px);
-webkit-transform: translateY(250px);
}
</style>
</head>
<body>
<h2>Animierter Text über einem verblassten Bild beim Hover</h2>
<div class="example">
<img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg"
width="300" height="300" alt="tree" />
<div class="content">
<div class="text">Tree</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
.example{
position:relative;
padding:0;
width:300px;
display:block;
cursor:pointer;
overflow:hidden;
}
.content {
opacity:0;
font-size: 40px;
position:absolute;
top:0;
left:0;
color:#1c87c9;
background-color:rgba(200,200,200,0.5);
width:300px;
height:300px;
-webkit-transition: all 400ms ease-out;
-moz-transition: all 400ms ease-out;
-o-transition: all 400ms ease-out;
-ms-transition: all 400ms ease-out;
transition: all 400ms ease-out;
text-align:center;
}
.example .content:hover { opacity:1; }
.example .content .text {
height:0;
opacity:1;
transition-delay: 0s;
transition-duration: 0.4s;
}
.example .content:hover .text {
opacity:1;
transform: translateY(250px);
-webkit-transform: translateY(250px);
}
</style>
</head>
<body>
<h2>Animierter Text über einem verblassten Bild beim Hover</h2>
<div class="example">
<img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg"
width="300" height="300" alt="tree" />
<div class="content">
<div class="text">Baum</div>
</div>
</div>
</body>
</html>
Ein anderes Beispiel, wo sich der Text von unten nach Mitte bewegt:
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
.example {
cursor: pointer;
height: 300px;
position: relative;
overflow: hidden;
width: 400px;
text-align:center;
}
.example .fadedbox {
background-color: #666666;
position: absolute;
top: 0;
left: 0;
color: #fff;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
opacity: 0;
width: 360px;
height: 100px;
padding: 130px 20px;
}
.example:hover .fadedbox { opacity: 0.8; }
.example .text {
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
transform: translateY(30px);
-webkit-transform: translateY(30px);
}
.example .title {
font-size: 2.5em;
text-transform: uppercase;
opacity: 0;
transition-delay: 0.2s;
transition-duration: 0.3s;
}
.example:hover .title,
.example:focus .title {
opacity: 1;
transform: translateY(0px);
-webkit-transform: translateY(0px);
}
</style>
</head>
<body>
<h2>Animierter Text über einem verblassten Bild beim Hover</h2>
<div class="example">
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="tile3" width="400" height="300" alt="house" />
<div class="fadedbox">
<div class="title text"> Haus </div>
</div>
</div>
</body>
</html>