html - 将 CSS 框移动到图像的下方

Question

我通常无法确定要编辑的代码位。但我正在尝试将图像上的黄色悬停框移动到图像的底部。我尝试将“顶部”标签更改为“底部”，使用各种不同的测量值，但它要么只是移动到中间区域，要么一起消失。

谁能帮我解决这个问题？这让我发疯..哈哈!

我帮 friend 做的网站在这里； http://outside.hobhob.uk/test/

我认为我应该编辑的代码如下；

.imghover a div {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  top: 0px;
  left: 0px;
}
.imghover a:hover img {
  position: relative;
  min-width: 100%;
  left: 0;
  -webkit-transform: scale(1.05);
  /* Safari and Chrome */
  -moz-transform: scale(1.05);
  /* Firefox */
  -ms-transform: scale(1.05);
  /* IE 9 */
  -o-transform: scale(1.05);
  /* Opera */
  transform: scale(1.05);
}
.imghover a .imghover-text {
  display: inline;
  position: absolute;
  left: -100%;
  top: 10px;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=0)";
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

我可能是错的？

任何帮助将不胜感激:D

Answer 1

编辑CSS

.imghover a div {
position: absolute;
width: 100%;
/* height: 100%; */
overflow: hidden;
/* top: 0px; */
left: 0px;
}

和

.imghover a .imghover-text {
display: inline;
position: absolute;
left: -100%;
bottom: 10px;/*change top to bottom*/
opacity: 0;
filter: alpha(opacity = 0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=0)";
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}