Наложение изображения застревает в нижней части изображения и не перемещается, когда пользователь наводит курсор мыши на изображение.

Question

Я пытаюсь наложить изображения на описание, и когда пользователь наводит курсор мыши на наложение, он перемещается вниз и показывает фотографию, которая находится внизу.

Однако наложения выглядят вот так. С тем, что выглядит как наложения, прилипшие к нижней части и при наведении мыши, ничего не происходит.

извините за изображения, они просто случайные фото.

my html выглядит так

<div class="Portfolio_container">
    <div class="Portfolio">
        <div class="section group">
            <div class="col span_1_of_3">
              <img src="Images/Dundee.jpg" alt="Avatar" class="image">
              <div class="overlay">
                <div class="text">Hello World</div>
              </div>
            </div>
            <div class="col span_1_of_3">
                <img src="Images/Dundee.jpg" alt="Avatar" class="image">
                 <div class="overlay">
                   <div class="text">Hello World</div>
                 </div>
            </div>
            <div class="col span_1_of_3">
                <img src="Images/Dundee.jpg" alt="Avatar" class="image">
                <div class="overlay">
                    <div class="text">Hello World</div>
                </div>
            </div>
        </div>
    </div>
</div>

и моя CSS

.Portfolio_container {           
  background-color: #847470;     /* colour of the whole portfolio page */
}




.Portfolio {               /* keeps the examples in the middle with the background colour matching the container that surounds it*/
  width: auto;
  margin-right: 5%;
  margin-left: 5%;
  background-color: #847470;
}




/*  SECTIONS  */
.section {
  clear: both;
  padding: 0px;
  margin: 0px;
}

/*  COLUMN SETUP  */
.col {
  display: block;
  float:left;
  margin: 1% 0 1% 2%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  GRID OF THREE  */
.span_3_of_3 { width: 100%; }
.span_2_of_3 { width: 66%; }
.span_1_of_3 { width: 32%; }

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
  .col {  margin: 1% 0 1% 0%; }
  .span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
}

.span_1_of_3 {
  height: 100%;
}

.image {
  max-width: 100%;     /* keeps the portfolio images within their divs */
  max-height: 100%;
  display: block;
  width: 100%;
  height: auto;
}


.overlay {

  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height: 100%;
  transition: .5s ease;
  opacity: 0.5;
}

.span_1_of_3:hover .overlay {
  height: 0%;
}

.text {
  color: white;
  font-size: 20px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

любая помощь будет принята с благодарностью.

Answer 1

нашел решение.

.span_1_of_3 {
    height: auto;
    position: relative; 
}

Мне нужно было сделать div, содержащий оверлеи, чтобы иметь относительную позицию. Надеется, что это помогает любому, кто имеет эту проблему.