Speech bubble on hovering an image?

HTML & CSS
#1

How is this done? I have been trying at it to no avail. Seen examples as well, but still not getting it down :frowning:

.photo {
    position:absolute;
    top:180px;
    left:250px;
    z-index:1;
    width:175px;
    height:175px;
    box-shadow:none;
    border-radius:50%;
    border:none;
    background:none;
}

body {
    background:black;
}

.bubble
{
   margin-top:50px;
   position: relative;
   width: 175px;
   height: 100px;
   padding: 0px;
   background: #ffffff;
   -webkit-border-radius: 100px;
   -moz-border-radius: 100px;
   border-radius: 100px;
    border: green solid 2px;
   top:25px;
   left:108px;
   transform:rotate(180deg);
   filter: drop-shadow(-4px -4px 4px #ccc);
   display:none;

}

.bubble:hover
{
   margin-top:50px;
   position: relative;
   width: 175px;
   height: 100px;
   padding: 0px;
   background: #ffffff;
   -webkit-border-radius: 100px;
   -moz-border-radius: 100px;
   border-radius: 100px;
    border: green solid 2px;
   top:25px;
   left:108px;
   transform:rotate(180deg);
   filter: drop-shadow(-4px -4px 4px #ccc);
   display:block;

}

.bubble:after
{
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 0 20px 20px;
    border-color: white transparent;
    display: block;
    width: 0;
    z-index: 1;
    top: -10px;
    left: 25px;
    transform:rotate(-135deg);
}

.bubble:before
{
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 0 20px 20px; 
    border-color: green transparent; 
    display: block;
    width: 0;
    z-index: -1;
    top: -16px;
    left: 22px;
    transform:rotate(-138deg);
}

p {
  width:54px;
  background:none;
  font-family:Trebuchet MS, Arial, Verdana;
  font-size:32px;
  transform:rotate(180deg);
  position:relative;
  top:0px;
  left:65px;
  filter: drop-shadow(2px 2px 2px #555); 
}

<a href="https://imgbb.com/"><img class="photo" src="https://i.ibb.co/q0C4D4M/58461451-594363321051717-6049779766507077632-n.jpg" alt="58461451-594363321051717-6049779766507077632-n" border="0"></a>

<div class="bubble">
  <p>Hey!</p>
</div>

So what I want to do, is make that speech bubble appear when I hover over her image.

DIV Wrappers
#2

Think I got it now. Found an example I can work with.

It’s untitled lol sorry. Just playing around with it for now.

#3

Change this…

.bubble:hover
{

…to this…

a:hover ~ .bubble
{

coothead

1 Like
#4

Thank you @coothead I got it worked out without that :slight_smile:. But will definitely have it in mind.

#5

@coothead I can’t get a smooth transition on hover, no matter which tag I apply it to in the CSS :flushed:

#6

That’s because ‘display:none’ to ‘display:block’ is,
like a light switch, an instantaneous event. :biggrin:

Try using ‘opacity:0’ to ‘opacity:1’ instead as it’s
working is more akin to a dimmer switch. :winky:

coothead

1 Like
#7

:slight_smile: so instead of display:none, do… opacity:0 ? :slight_smile:

#8

Yepper that worked :smiley:. Yippeee! :heart_eyes:

#9

Gosh, I’ve actually brought a little happiness into you life at last. :rofl:

coothead

4 Likes
#10

:joy: :joy: :joy: - It’s all good, you always bring happiness to me. And I’m sure to everyone here :smiley:

#11

Oh, if that were only true. :wonky:

I quite often get sent to “Naughty Mat” for my postal efforts. :taped:

coothead

1 Like
#12

Why lol. Time for lunch, talk to ya later :smiley: :hamburger: :fries: :pizza: :bread: :poultry_leg:

#13

How do I put the green tail appear on both sides of the white one? It’s showing one side right now.

#14

Hi there landans37,

I would use an svg instead…

speech-tail.svg.zip (312 Bytes)

…with this code…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled document</title>

<!--
The internal CSS should be transferred to an external file
<link rel="stylesheet" href="screen.css" media="screen">
-->

<style media="screen">
body {
    background-color: #808080;
  } 
.myDiv {
 	position: relative;
    top: 180px;
    left: 250px;
 }
.myDiv a, .photo{
 	display: block;
    width: 175px;
    height: 175px;
    border-radius: 50%;
    overflow: hidden;	
 }
 
 .speech {
    position: absolute;
    left: 180px;
    top: -110px;
    width: 200px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    background-color: #fff;
    border: 4px solid green;
    border-radius: 30px;
    box-shadow: 2px 2px 4px #222;
    font-family: arial, 'open Sans', 'segoe ui';
    font-size: 20px;
    color: #000; 
    opacity: 0;
    transition: 0.4s ease-in-out; /* Animation */
 }

.speech:before {
    content: url( speech-tail.svg ); 
    position: absolute;
    top: 82px;
    left: 4px;   
  }
.myDiv a:hover + .speech {
     opacity: 1;
 }
</style>

</head>
<body>

 <div class="myDiv">
  <a href="https://imgbb.com/">
   <img class="photo" src="https://i.ibb.co/q0C4D4M/58461451-594363321051717-6049779766507077632-n.jpg" 
   alt="young lady with pink cheeks and ribbons in her hair">
  </a>
  <div class="speech">Hey!</div>
 </div>

</body>
</html>

The svg file needs to linked to here…

.speech:before {
    content: url( speech-tail.svg ); 
    position: absolute;
    top: 82px;

Note:-
I was going to change all those awful px units to em.
but didn’t bother in the end as I knew that you would
change them all back.

1 Like
#15

Hi. Ok cool, I can use svg’s. I’ll take a look. Thanks :slight_smile:

#16

This looks great. I’ll need to give the svg a class name I guess to be able to move it to the desired position. Color and stuff too, though I see that done through the html end :slight_smile:

#17

No, it’s positioning is handled here…

.speech:before {
    content: url( speech-tail.svg ); 
    position: absolute;
    top: 82px; /* svg  top positioning  */
    left: 4px; /* svg  left positioning  */  
  }

coothead

#18

Oh… hm, didn’t see that lol. I’ll check it out :smiley:

#19

The svg file needs to linked to here…

Stuck with this one. Only way can do is upload it to imgbb and use its url instead… other than that, I’m so bad with linking it locally :weary:

#20

Put the svg in the same place as your image of the
“young lady with pink cheeks and ribbons in her hair”

https://i.ibb.co/

It would then be …

content: url( https://i.ibb.co/speech-tail.svg );

coothead

1 Like