Sådan oprettes: Billedoverskrift

Lær, hvordan du opretter en billedoverskrift ved museoverførsel.

Billedoverskrift

Placer musen over billedet for at se lag effektet.

Avatar
Mit Navn er Bill

Prøv det selv

Sådan oprettes en laget billedoverskrift

Første trin - Tilføj HTML:

<div class="container">
  <img src="img_avatar.png" alt="Avatar" class="image">
  <div class="overlay">Mit Navn er John</div>
</div>

Anden trin - Tilføj CSS:

* {box-sizing: border-box}
/* Containeren, hvor laget skal placeres. Juster bredden efter behov */
.container {
  Position: relative;
  Width: 50%;
  Max-width: 300px;
}
/* Gør billedet responsivt */
.image {
  Display: block;
  Width: 100%;
  Height: auto;
}
/* Lag effekt - placeret over containeren og over billedet */
.overlay {
  Position: absolute;
  Bottom: 0;
  Background: rgb(0, 0, 0);
  Background: rgba(0, 0, 0, 0.5); /* Sort gennemsigtigt */
  Color: #f1f1f1;
  Width: 100%;
  Transition: .5s ease;
  Opacity:0;
  Color: white;
  Font-size: 20px;
  Padding: 20px;
  Text-align: center;
}
/* Når du holder musen over containeren, viser titlen i lag gradvist */
.container:hover .overlay {
  Opacity: 1;
}

Prøv det selv

Relaterede sider

Tilvejebringsel:CSS billede

Tilvejebringsel:Sådan oprettes billedoverlappe hover effekt