HTML overflow CSS not working

Question

The CSS:

a img {
        bottom: -30px;
        right: 0;
        position: absolute;
        overflow: hidden;
        -webkit-transition: all .1s ease-in-out; 
        -moz-transition: all .1s ease-in-out;
        -o-transition: all .1s ease-in-out;
        transition: all .1s ease-in-out;
}
a img:hover {
        transform: translate(0,-30px);
        -webkit-transform: translate(0,-30px);
        -o-transform: translate(0,-30px);
        -moz-transform: translate(0,-30px);
}

Image HTML:

<a href="index.html"><img src="images/tag.png" height="100" width="119"></img></a>

Viewing the webpage on a 1080p screen makes it look like there aren't any problems. But some people do have lower resolution screens.

EX:

https://i.sstatic.net/8xqXW.jpg

As you can see, the "tag" isn't sticking to the bottom of the page. Any help would be great! Thanks!

Unrelated, but your image tag is incorrect. For XHTML it should be <img src="images/tag.png" height="100" width="119"/> — Simon
– Simon, Commented May 23, 2013 at 22:50
@Simon yeah, I don't know why I used </img> sometimes I mindlessly write my code but thanks for pointing that out :) — tizz98
– tizz98, Commented May 26, 2013 at 22:40

David Storey · Accepted Answer · 2013-05-23 22:47:04Z

2

Do you want it to be always at the bottom of the screen, no matter what? If so,

Change:

position: absolute;

To:

position: fixed;

answered May 23, 2013 at 22:47

David Storey

30.6k6 gold badges52 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

divyanshm Over a year ago

@dstorey - Haha, new users! They come with one problem, get a solution and vanish! Hope you get the well deserved green-tick!!

Collectives™ on Stack Overflow

HTML overflow CSS not working

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related