How is this done? I have been trying at it to no avail. Seen examples as well, but still not getting it down
.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.
Think I got it now. Found an example I can work with.
It’s untitled lol sorry. Just playing around with it for now.
Thank you @coothead I got it worked out without that
@coothead I can’t get a smooth transition on hover, no matter which tag I apply it to in the CSS
That’s because ‘display:none’ to ‘display:block’ is,
Try using ‘opacity:0’ to ‘opacity:1’ instead as it’s
coothead
1 Like
Yepper that worked
Gosh, I’ve actually brought a little happiness into you life at last.
coothead
3 Likes
Oh, if that were only true.
I quite often get sent to “Naughty Mat” for my postal efforts.
coothead
1 Like
How do I put the green tail appear on both sides of the white one? It’s showing one side right now.
https://codepen.io/cpUserpen/pen/RwGmqwJ?editors=1100
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 :-px units to em .
1 Like
Hi. Ok cool, I can use svg’s. I’ll take a look. Thanks
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
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
Oh… hm, didn’t see that lol. I’ll check it out
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
ladans37:
Stuck with this one.
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
. But will definitely have it in mind.
. Yippeee! 
