web/static/styles.css

body {
  height: 100%;
  font-family: 'Helvetica';
  margin-top: 50px;
  margin-left: 10px;
  margin-right: 10px;
  /*margin-bottom: 4000px;*/
  margin-bottom: 100px;
  padding: 0;
  text-align: center;
}

.header {
  margin-top: 40px;
  margin-bottom: 20px;
  color: #000000;
}

.feature-select {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

.dropzone {
  margin-top: 20px;
  width: 90%;
  min-height: 100px;
  border: 2px dashed  #0b0f19;;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin: 20px auto; /* Auto margins for horizontal centering */
}

.prediction-container {
  margin-top: 20px;
  min-height: 100px;
  width: 90%;
  border: 2px solid #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto; /* Auto margins for horizontal centering */
}


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

/* The container for the predicted images */
#predicted-images {
  margin: auto;
  margin-top: 20px;
  margin-bottom: 10px;
  display: grid;
  row-gap: 1%;
  column-gap: 1%;
  width: 95%;
  justify-content: center;
  align-items: center;
  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 {
  margin: auto;
  width: 95%; 
  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;
}

.github-container {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

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

/* For tablets and desktops, add a breakpoint */
@media (min-width: 900px) {
  body {
    font-family: 'Helvetica';
    margin-top: 90px;
    margin-left: 10px;
    margin-right: 10px;
    padding: 0;
    text-align: center;
    margin-bottom: 100px;
  }
 
  .dropzone {
    min-height: 225px;
    width: 40%;
  }

  .prediction-container {
    min-height: 225px;
    width: 40%;
  }

  #predicted-images {
    grid-template-columns: repeat(3, 1fr);
  }
}