Bottom: 0 - weird behavior when zooming

Question

I am experiencing some weird behavior when zooming out on my webpage. I have some divs holding a title and overlay. When the user hovers over the div, I want the (in the overlay) to show, and when the user is not hovering, I want the  not to show.

This works fine in when the user is at a 0 zoom in the browser, but when the user zooms out, I can see the  section. Whilst zoomed out I can increase the bottom to correct for this, but there has to be something I missing.

Is there anyway to keep the  hidden when zoomed out?

I understand this must sound crazy so I did a crude JSFiddle to show what I am talking about. The weird thing is that when zooming out on JSFiddle the problem I am having in my browser (safari) is not happening on their site.

http://jsfiddle.net/FB2TM/

Any help would be appreciated!

I should have mentioned that I plan on animating the mouse over effect.

score 1 · Accepted Answer · answered Apr 04 '14 at 01:53

1

This behavior is happening because the browser is not resizing the text proportionally ending up with text larger than it should. You will also experience different text sizes over different browsers when resizing.

I find that the best solution is to do it differently by completely hiding the text that is not supposed to show:

.box {
  width:200px;
  height:200px;
  background-color:aqua;
  position: relative;
  overflow: hidden;
}

.caption {
  width:200px;
  color:white;
  background-color:black;
  left: 0;
  z-index: 2;
  bottom: 0;
  position: absolute;
}

.caption p {
  display: none;
}

.box:hover .caption {
  bottom:0;
}

.box:hover .caption p {
  display: block;
}

http://jsfiddle.net/FB2TM/2/

answered Apr 04 '14 at 01:53

grim

6,669
11
38
57

Is there anyway to animate `display`? – justinw Apr 04 '14 at 18:54
@Quoid You can't animate the display with CSS. The only way I've found was to use javascript/jQuery. Find the height of the hidden element (http://stackoverflow.com/questions/2345784/jquery-get-height-of-hidden-element-in-jquery) then set the initial CSS (http://api.jquery.com/css/) and finally perform the animation with animate (http://api.jquery.com/animate/) or any of the shorthand jQuery animation functions. – grim Apr 04 '14 at 20:51
@Quoid you can also check out: http://stackoverflow.com/questions/13037637/css3-animation-and-display-none if you are able to set a fixed height to the hidden element. – grim Apr 04 '14 at 20:53

score 1 · Answer 2 · answered Apr 04 '14 at 02:00

1

Changing from your approach of hiding the text with a negative offset to just hiding the text you want to hide might change your css animation options a bit. It does allow for dropping the z-index from the css.

<div class="box">
    <div class="caption">
        <div class="title">THE TITLE</div>
        <p>These are words, I do not want them to show, until mouseover. When zooming out, I can see these words.</p>
    </div>
</div>

and your css to:

.box {
    background-color:aqua;
    height:200px;
    position: relative;
    width:200px;
}
.caption {
    background-color:black;
    bottom:0;
    color:white;
    position: absolute;
    width:200px;
}
.caption p {
    display: none;
}
.box:hover p {
    display: block;
}

jsFiddle

answered Apr 04 '14 at 02:00

Jason Aller

3,541
28
38
38

Hey Jason, I should have mentioned in my original post that I was using animations. I actually used `display` originally, but I couldn't seem to figure out a way to animate it. When I use `bottom`, I can have a nice smooth css animation to raise and lower the caption on mouse hover. – justinw Apr 04 '14 at 18:52
I suspected that might be the case based on how things were constructed. Do you only see the issue in Safari or do you also see it in other browsers? – Jason Aller Apr 04 '14 at 20:22
I can only speak to Safari/Chrome and Firefox on MacOS. It indeed only happens on Chrome/Safari and does not happen in Firefox...Hrmm, any idea why'd this would be? – justinw Apr 04 '14 at 20:30

Erick A. Montañez · Answer 3 · 2014-04-04T01:53:34.460

0

I suggest to use top and fix positions with margin-top. For example:

.caption {
    width:200px;
    color:white;
    background-color:black;
    left: 0;
    z-index: 2;
    top:100%;
    margin-top:-30px; //Height of THE TITLE
    position: absolute;
}
.box:hover .caption {
   margin-top:-116px; //Height of .caption
}

I think using bottom is not a good practice.

Here's an update to your fiddle: http://jsfiddle.net/FB2TM/3/

edited Apr 04 '14 at 01:53

answered Apr 04 '14 at 01:47

Erick A. Montañez

447
1
6
11

Using `bottom` is not any more bad practice than using `top`. Or `left` or `right`. It just depends what you are trying to accomplish positioning-wise. – Kelderic Apr 04 '14 at 02:12

Bottom: 0 - weird behavior when zooming

3 Answers3