Heute bauen wir mal gemeinsam an einer Team-Seite rum und zwar möchte ich euch zeigen, wie man mehrere Module in einer Spalte ausblenden kann, um sie dann bei einem Mouse Hover wieder einzublenden.

Dieses Ausblenden / Einblenden ist immer sehr praktisch und kann man immer wieder verwenden.

Video

Anleitung

Bevor ihr in einer Column die eingebaute Module versteckt werden können, müsst ihr noch ein paar Dinge vorbereiten.

Zuerst einmal müsst ihr der Sektion / Sections eine ≪id≫ mit Wert ≪team≫ geben und dann müsst ihr der Zeile / Row eine ≪class≫ geben mit Wert ≪member≫.

Danach könnt ihr die einzelnen Spalten / Column mit verschiedenen Module füllen, denn dieser Inhalt wird dann mit CSS ausgeblendet und nur angezeigt, wenn man mit der Maus darüber fährt.

#team .member .et_pb_column:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(50, 50, 50, 0);
  transition: all 0.3s ease-in-out;
}
#team .member .et_pb_column:hover:before {
  background-color: rgba(50, 50, 50, 0.66);
}
#team .member .et_pb_column .et_pb_module {
  opacity: 0;
  transition: all 1s ease-in-out;
}
#team .member .et_pb_column:hover .et_pb_module {
  opacity: 1;
}
@media screen and (max-width: 980px) {
  #team .member .et_pb_column:before {
    background-color: rgba(50, 50, 50, 0.66);
  }
  #team .member .et_pb_column:hover:before {
    background-color: rgba(50, 50, 50, 0.8);
  }
  #team .member .et_pb_column .et_pb_module {
    opacity: 1;
  }
}