How To Add CSS Bubbles

How To Add CSS Bubbles
Spread the love

Adding bubbles is an easy method to animate your posts and make them look more appealing. These informational bubbles can be used to provide definitions, short tips, or other details.

These bubbles can’t be seen. They only appear when the reader hovers their mouse pointer over a word or passage of text that you want to highlight with additional information.

How To Add CSS Bubbles In A Post ?

Here is an example of bubble

The bubble emerges when you move the mouse cursor over the underlined text.

Let’s see how we can create bubbles using CSS in very simple way:

Step 1: Add Customized Styles For Bubbles In Blogger Template

In Blogger go to ‘Template’ and select ‘edit html’. Then search the following line:

]]></b:skin>

and paste the CSS styles just before. You will need 3 styles:

A style (1) for the bubble itself. In the case of the small example above I used the following:

.help-bubble100 {

width: 100px;

height: 18px;

top: -100px;

left: -120px;

padding: 3px 3px 3px 3px;

color: #fff ;

background-color: #228B22 ;

font-size: 10px;

font-family: verdana ;

border: 1px solid #228B22 ;

overflow: hidden;

display: block;

position: absolute; /* important */   

visibility: hidden;     

opacity: 0;

transition: 0.3s ease-out;

-webkit-transition: 0.3s ease-out;

}

A style (2) for the text that supports the bubble (the bubble will appear when the mouse is over it). In the example I just underlined the text:

.help-needed {

position: relative;

text-decoration:underline ;

}

A style (3) for the bubble when the mouse is over the text (style that triggers the appearance of the bubble):

.help-needed:hover .help-bubble100 {

visibility: visible;

opacity: 1;

top: 0px;    

z-index: 50;    

transition: 0.8s ease-out;

-webkit-transition: 0.8s ease-out;

}

These styles may be customized to your needs. For instance, to change the size and the color of the bubble, you just have to edit the following property in the style of the bubble itself:  width; height; background-color;.

Step 2: Insert The Bubble Into Your Post:

Once your post is ready, switch to the HTML view. Search for the text that should trigger the appearance of the bubble when the mouse is over it and add the the corresponding style (2). In the example above I used the html span tag:

Here is an <span class=”help-needed”>example of bubble</span>.

Just before the span closing tag, add the bubble itself with its content and its style. I used another span tag in the example above:

Here is an <span class=”help-needed”>example of bubble

<span class=”help-bubble100″>I am the bubble!</span></span>.

Admin

Admin