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

Asked

Viewed 235 times

0

I need to make an effect similar to a conversation balloon in the tags < a > of my menu, as well as this figure, when I step the mouse( Hover effect) the balloon appears. I tried to do according to this site ( http://www.ilikepixels.co.uk/drop/bubbler/ ), but it didn’t work out inserir a descrição da imagem aqui

I also need to do the same effect when I hover over an image, a "balloon" appears with information about the image

  • 1

    put the part of your code that you’re treating it to help you better

  • Is it possible to [Edit] the question and add the code of this your attempt? It will be easier to identify your difficulty.

  • you will use Tooltip="msg", at least in WPF, a guy helped me and it worked, you put in the field you want to use and will appear :), for more information I found this site: https://www.wpf-tutorial.com/control-concepts/tooltips/

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>

Kind of?

  • exactly!!!!! Thank you, gave it right

Browser other questions tagged

You are not signed in. Login or sign up in order to post.