Move CSS box to lower of image

Question

I am generally way off on which bit of code to edit.. but I am trying to move my yellow hover box on my images to the bottom side of the image. I tried changing the 'top' tags to 'bottom', with various different measurements, but it either just moves to the middle area or vanishes all together..

Could anyone help me get this figured out? It's driving me insane.. haha!

The website I am making for a friend is here; http://outside.hobhob.uk/test/

The code I think I should be editing is the following;

.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;
}

I could be wrong though?

Any help would be greatly appreciated :D

Answer 1

edit css

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

and

.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;
}