Wie erstelle ich eine Bildüberlagerung mit CSS, die für Bilder unterschiedlicher Höhe funktioniert?

So erstellen Sie eine Bildüberlagerung mit CSS

Das Problem:

Sie möchten Platzieren Sie eine dunkle Überlagerung mit Text und einem Symbol über einem Bild, wenn Sie mit der Maus darüber fahren. Allerdings stoßen Sie auf Schwierigkeiten, da die Bildhöhen variieren und frühere Tutorials nicht erfolgreich waren.

Die Lösung:

Dieser Effekt kann wie folgt erzielt werden CSS Code:

<code class="css">.image-container {
  position: relative;
  width: 200px;
  height: 300px;
}

.image-container .after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  color: #FFF;
}

.image-container:hover .after {
  display: block;
  background: rgba(0, 0, 0, .6);
}</code>

HTML:

<code class="html"><div class="image-container">
  <img src="http://lorempixel.com/300/200" />
  <div class="after">This is some content</div>
</div></code>

Zusätzliches Styling:

Für einen eleganteren Look sollten Sie Folgendes in Betracht ziehen Folgendes hinzufügen CSS:

<code class="css">.image-container .after .content {
  position: absolute;
  bottom: 0;
  font-family: Arial;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  padding: 5px;
}

.image-container .after .zoom {
  color: #DDD;
  font-size: 48px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -30px 0 0 -19px;
  height: 50px;
  width: 45px;
  cursor: pointer;
}

.image-container .after .zoom:hover {
  color: #FFF;
}</code>

Demo:

Sehen Sie sich die Demo hier an: http://jsfiddle.net/6Mt3Q/

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine Bildüberlagerung mit CSS, die für Bilder unterschiedlicher Höhe funktioniert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!