Question

I want to create a CSS based popup (CSS3 Allowed) without any JavaScript, with a fade transition and scale effect. Something similar to IceCream Sandwitch and JellyBean popup messages.

I have tried the following:
http://jsfiddle.net/OMS_/7UaK4/5/

Main Parts of Code:

HTML

<span class="info"> Info </span>
<div class="message">
    <p>
        Content
    </p>
</div>​  

CSS

.message {
    position: absolute;
    top: 100px;
    left: 0;
    width: 100%;
    text-align: center;
    opacity: 0;
    -webkit-transform: scale(.9, .9);
    -webkit-transition: all .18s ease-in-out;
}
.info:hover + .message {
    opacity: 1;
    -webkit-transform: scale(1, 1);
}

What I am doing is setting the opacity of the element to 0, and on hover of a sibling DOM element, transtion it to 1.
How do I position it in center, both vertically and horizontally?
Also, is this the proper way to make a CSS3 popup?
Can I transition from display: none to display: block ?

Thanks

Answer 1

How do I position it in center, both vertically and horizontally?

Essentially, you would push the popup 50% from the top and left. However, you must go backwards a bit, since you must take into account the width and height of the popup.

.center-of-screen {
    position: absolute;
    top: 50%;     margin-top:  /* -(height/2) */;
    left: 50%;    margin-left: /* -(width/2) */;
}

Source: How to center an object exactly in the center?

Note: -(height/2) and -(width/2) are negative values of half of element’s width and height. E.g. if your element is 300px x 200px code is:

.center-of-screen {
    position: absolute;
    top: 50%;     margin-top:  -100px;
    left: 50%;    margin-left: -150px;
}

---

Also, is this the proper way to make a CSS3 popup?

Yes, if you are talking about a hover popup.

---

Can I transition from display: none to display: block ?

No. You would go from display: none to display: block with transition only on opacity.