Wie erstelle ich Bild-Hover-Details mit HTML und CSS?

Verwenden Sie Bild-Hover-Effekte mit Textdetails, um Ihrer Website zusätzliche Interaktivität zu verleihen. Durch die Verwendung einer kleinen Menge HTML und CSS können Sie ein Standbild in eine Einheit mit erklärendem Wortlaut umwandeln, wenn der Benutzer mit der Maus über das Bild fährt. Dieses Tutorial führt Sie durch die Entwicklung eines einfachen Symbol-Hover-Effekts, einschließlich des HTML-Codes und der CSS-Dekoration, die zum Erreichen des endgültigen Effekts erforderlich sind. Egal, ob Sie ein Neuling oder ein erfahrener Webseitenersteller sind, dieser Artikel liefert Ihnen die Details, die Sie benötigen, um Ihre Website zu bereichern und einen lebendigen Fotoschwebeeffekt zu erzielen.

:Hover-Selektor

Der :hover-Selektor von

CSS wird verwendet, um ein Element auszuwählen und zu formatieren, wenn der Benutzer mit der Maus darüber fährt. Der :hover-Selektor wird zusammen mit anderen Selektoren verwendet, um Stile auf ein bestimmtes HTML-Element anzuwenden, wenn sich der Mauszeiger über dem Element befindet.

Grammatik

selector:hover {
   property: value;
}

Wobei der Selektor die HTML-Komponente verkörpert, auf die abgezielt werden soll, während die Eigenschaften und Werte die CSS-Eigenschaften und ihren Auswertungsstatus veranschaulichen, die Sie beim Hover auf diese Komponente anwenden möchten.

Methode

Um eine durch Hover ausgelöste Illustrationsdekoration mit HTML und CSS zu erstellen, führen wir die folgenden Schritte aus -

• Erstellen Sie einen Container für die Darstellung und Darstellung – Wir verwenden ein div-Element, um einen Container für das Bild und die Beschreibung zu erstellen. Container sollten eine bestimmte Größe und Abmessungen erhalten, um ihren Umfang sicherzustellen, und das Attribut „Position: relativ“ verwenden, um die Platzierung von Anweisungen innerhalb des Containers zu erleichtern.

• Bild hinzufügen – Wir werden das img-Element verwenden, um die Illustration zum Container hinzuzufügen. Darüber hinaus legen wir fest, dass die Bildabmessungen 100 % der Containerabmessungen entsprechen, damit die idealen Proportionen innerhalb des Containers erhalten bleiben.

• Beschreibung hinzufügen – Wir werden ein weiteres div-Element verwenden, um die Beschreibung hinzuzufügen. Fügen Sie diesem Div das Attribut „position: absolute“ hinzu und platzieren Sie es ganz unten im Container, sodass es die Abbildung überlappt

• Stilisierte Beschreibung − Wir werden CSS verwenden, um die Beschreibung zu entwerfen, einschließlich verschiedener Modifikationen wie dem Hinzufügen einer Hintergrundfarbe, einer Änderung der Textfarbe und dem Hinzufügen von Auffüllungen. Wir werden auch die Eigenschaften „display:flex“ und „flex-direction:column“ verwenden, um den Text im Beschreibungscontainer vertikal zu zentrieren.

• Hover-Effekt hinzufügen − Um die Beschreibung anzuzeigen, wenn der Mauszeiger über dem Bild schwebt, verwenden wir den „:hover“-Selektor in CSS. Wenn sich der Mauszeiger über dem Container befindet, wird die Beschreibung sichtbar und das Bild wird leicht vergrößert, um einen Hover-Effekt zu erzeugen.

• Übergangseffekt hinzufügen − Um den Hover-Effekt sanfter und natürlicher zu gestalten, fügen wir einen Übergangseffekt hinzu

Beispiel

Der folgende Code zeigt, wie Sie mithilfe von HTML und CSS einen optisch ansprechenden Bild-Hover-Effekt erstellen. Der Code definiert ein Containerelement mit fester Breite und Höhe, mit verstecktem Überlauf und einem Bild innerhalb des Containers, das die gesamte Containergröße einnimmt. Der Bildübergang erfolgt fließend mit einem Beschleunigungseffekt von 0,3 Sekunden, wenn die Maus darüber bewegt wird. Darüber hinaus enthält der Container ein Textelement am unteren Rand des Containers mit einer teilweise durchscheinenden schwarzen Hintergrundfarbe, die so konfiguriert ist, dass sie die gesamte Breite und Höhe des Containers ausfüllt. Textobjekte verfügen außerdem über eine Reihe von Stilen, die den Text im Objekt zentrieren. Die Textkomponente ist standardmäßig unsichtbar, erscheint jedoch mit einem Beschleunigungseffekt von 0,3 Sekunden, wenn Sie mit der Maus über den Container fahren. Dieser Effekt wird durch die Anwendung von Übergangs- und Deckkrafteigenschaften auf Textelemente erreicht. Wenn Sie mit der Maus über den Container fahren, wird das Bild um 20 % vergrößert, um die Beteiligung und Interaktion des Benutzers zu verbessern. Der Code erzeugt letztendlich einen Bild-Hover-Effekt, der die visuelle Attraktivität der Webseite verbessert.

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         position: relative;
         width: 300px;
         height: 200px;
         overflow: hidden;
      }
      .container img {
         width: 100%;
         height: 100%;
         transition: all 0.3s ease;
      }
      .text {
         position: absolute;
         bottom: 0;
         left: 0;
         background-color: rgba(0, 0, 0, 0.5);
         color: white;
         padding: 10px;
         width: 100%;
         height: 100%;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         opacity: 0;
         transition: all 0.3s ease;
      }
      .container:hover .text {
         opacity: 1;
      }
   </style>
</head>
<body>
   <h4 id="How-to-Create-Image-Hovered-Detail-using-HTML-CSS">How to Create Image Hovered Detail using HTML & CSS?</h4>
   <div class="container">
      <img src=" https://picsum.photos/200/300" alt="image1">
      <div class="text">
         <h2 id="Image">Image 1</h2>
         <p>This is some description for the image</p>
      </div>
   </div>
</body>
</html>

Fazit

Zusammenfassend lässt sich sagen, dass das Erstellen von Hover-Effekten für Bilder mit Textdetails eine hervorragende Möglichkeit ist, Ihrer Website eine zusätzliche Dynamik zu verleihen. Mit nur wenigen Zeilen HTML- und CSS-Code können Sie Bilder animieren, um Ihren Besuchern wichtige Daten bereitzustellen. Mit den detaillierten Anweisungen in diesem Tutorial beherrschen Sie die Kunst, einen einfachen, aber leistungsstarken Bild-Hover-Effekt zu entwerfen. Unabhängig davon, ob Sie ein Neuling oder ein erfahrener Webentwickler sind, kann dieser Ansatz ein wertvolles Werkzeug für Ihre Webentwicklungsfähigkeiten sein. Warum probieren Sie es nicht aus und sehen, wie es Ihre Website verbessert?

Das obige ist der detaillierte Inhalt vonWie erstelle ich Bild-Hover-Details mit HTML und CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!