web/static/styles.css

body {
  font-family: 'Helvetica';
  margin-top: 100px;
  margin-left: 100px;
  margin-right: 100px;
  padding: 0;
}

.header {
  margin-top: 40px;
  margin-bottom: 20px;
  background-color: #ffffff;
  color: #000000;
  position: absolute;
  text-align: center;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
}

.container {
  margin-top: 120px;
  height: auto;
  top: 100px;
  display: flex;
  justify-content: space-around;
  padding: 20px;
  position: relative;
  align-items: stretch;
}

.left-container {
  width: 52%;
  padding: 20px;
  text-align: center;
  align-items: center;
  align-content: center;
}

.right-container {
  margin-left:-2px;
  width: 48%;
  padding: 20px;
  border: 2px solid #000000;
  text-align: left;
}

.dropzone {
  width: 52%;
  min-height: 500px;
  border: 2px solid #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

#uploaded-image {
  max-width: 100%;
  max-height: 200px;
  display: none;
  align-items: center;
}

.github-container {
  display: flex;
  justify-content: center;
  margin-top: 100px;
}

.github-container a {
  display: flex;
  color:#000000;
  align-items: center;
}

.feature-select {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

/* The container for the predicted images */
#predicted-images {
  display: grid;
  row-gap: 1%;
  column-gap: 1%;
  width: 100%;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, fr);
  position: relative; /* Set the container as a relative positioning context */
}

/* The predicted image */
#predicted-images img {
  width: 100%; 
  height: auto;
  display: block; 
  align-items: center;
}

/* The tooltip */
.image-tooltip {
  position: absolute;
  bottom: 100%; /* Position the tooltip above the image */
  left: 50%; /* Center the tooltip horizontally */
  transform: translate(0%, -60%); /* Center both horizontally and vertically */
  background-color: rgba(0, 0, 0, 0.6);
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 20px;
  color: white;
  font-size: 12px;
  pointer-events: none;
  opacity: 0; /* Initially set the tooltip to be transparent */
}

/* Apply the hover effect */
#predicted-images img {
  /* Set initial transition properties */
  transition: all 0.3s ease-in-out;
  transform: scale(1); /* Set the initial scale to 1 (normal size) */
}

#predicted-images img:hover {
  filter: brightness(70%);
  transform: scale(1.07); /* Scale the image up to 1.1 times its original size on hover */
}

/* Show the tooltip on image hover */
#predicted-images .image-container:hover .image-tooltip {
opacity: 1; /* Make the tooltip visible on image hover */
visibility: visible; /* Show the tooltip on image hover */
}

/* The caption */
.image-caption {
  bottom: 0;
  left: 0;
  width: auto;
  gap: 0%;
  padding: 10px;
  align-items: center;
  text-decoration: none; 
  font-size: 14px;
  text-align: center;
  font-weight: normal;
  pointer-events: none; /* Prevent caption from blocking clicks */
}

.image-species {
  opacity: 0;
}

#predicted-images a {
  color: #4e4e4e;
  text-decoration: none; 
  font-weight: normal;
}

#predicted-images > div > a:hover .image-caption{
  color: #000000;
  font-size:  14px;
  transition: 0.5s;
}