Daniel Hobbs Daniel Hobbs - 5 months ago 8
HTML Question

Move CSS box to lower of image

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

lsv lsv
Answer

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