How to make a "balloon" effect in a menu?

Navigation
0

I need to do a chat bubble effect on the < a > of my menu, just like this figure, when I hover the mouse (hover effect) the balloon appears. I tried to make this site ( link ), but it did not work

IalsoneedtodothesamethingwhenImovethemouseoveranimage,a"balloon" with an image information appears

    
asked by anonymous 27.07.2017 / 22:51

1 answer

2

.bubble:hover 
{
position: relative;
width: auto;
height: 120px;
padding: 10px;
background: #000;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

.bubble:after 
{
content: '';
position: absolute;
border-style: solid;
border-width: 15px 15px 0;
border-color: #000 transparent;
display: block;
width: 0;
z-index: 1;
bottom: -15px;
left: 10px;
}
<a href="#" class="bubble">PASSE AQUI</a>

Like this?

    
27.07.2017 / 22:56
It is possible to use a variable in Strings.xml Change input value with javascript