将 CSS 框移动到图片下方

Question

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

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

我帮朋友做的网站在这里； 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;
}

Answer 2

.imghover a:hover .imghover-text {
  top: auto:
  bottom: 0;
}
.imghover a .imghover-text span {
  vertical-align: top;
}

添加这么多代码，它将完美运行

将 CSS 框移动到图片下方

Move CSS box to lower of image

html

css

wordpress

webkit

hover