Question

我通常会想要编辑哪些代码..但我试图将我的图像上的黄色悬停框移动到图像的底部。我尝试将“顶部”标签更改为“底部”，并进行各种不同的测量，但它只是移动到中间区域或者一起消失。

任何人都可以帮我解决这个问题吗？这让我疯了......哈哈！

我为朋友制作的网站就在这里; 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框移动到图像的下方

2 个答案: