CODEWITHSUNDEEP
htmlcsscss-transitions
Om Shankar
Om Shankar

Reputation: 8069

Create a CSS only Popup, with fade and effect

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

Upvotes: 3

Views: 15564

Answers (2)

Fabian von Ellerts
Fabian von Ellerts

Reputation: 5211

This is possible now by using visibility:

.message {
    visibility: hidden;
    opacity: 0;

    transform: scale(.9);

    transition: transform .18s, opacity .18s, visibility 0s .18s; // delay visibility
}

.info:hover + .message {
    visibility: visible;
    opacity: 1;

    transform: scale(1);

    transition-delay: 0s;
}

Upvotes: 0

John Smith
John Smith

Reputation: 1780

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.

Upvotes: 5

Related Questions