Bouwen - mcphendriks/your-tribe-squad-page GitHub Wiki

In de bouwfase heb ik geprobeerd om verloop overlay toe te voegen aan een afbeelding (mugshots) Onderstaand staat de code beschreven die niet voor het visueel resultaat heeft gezorgd. De acties die ik heb uitgevoerd binnen het bouwen staan hieronder omschrijven:

Optie 1: De index.html .div. .id. weergeven met de waarde "oval". Het oval element zorgt ervoor dat alle afbeeldingen van squat C worden weergegeven.

<div id="ovals" class="ovals"

In het css element heb ik linear-gardient toegevoegd, de onderstaande code zorgde ervoor dat de gardient overlay niet werd weergegeven op de afbeeldingen, maar in het midden van de carousel weergaf. Daarnaast heb ik ook geprobeerd om een ::after selector toe toe voegen

.oval {
  Background-image: linear-gradient(to bottom right, blue, red);
  opacity: 0.75;
  margin: 5em auto;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

Optie 2:

Ten slot heb ik geprobeerd om de gardient

Gloed achter de mugshots

.bm-white {
  border-radius: 50%;
  Background-image: linear-gradient(to bottom right, blue, red);
  opacity: 0.75;
}