How to place a thought bubble on top of an image CSS

Question

I have a work project that entails getting an image from a user, and based on that image, place a thought bubble, or speech bubble on top of that image.I have to consider placement and all that, but I just want a working version first. I'm using the jQuery facial recognition library for the image but I can't find any info on how to get a bubble on the image.

Answer 1

What about something like this.

You can place the image inside a <div> which has a border-radius of 50% and overflow: hidden. This will clip the image to a rounded shape.

Then, using the CSS pseudo elements :before and :after, you can create two thought bubble trails.

I also added a little animation to make the bubbles float.

body {
   text-align: center;
}  
.bubble-inner {
  overflow: hidden;
  border-radius: 50%;
  animation: float 2s ease-in-out infinite;
}
.bubble img {
  display: block;  
  max-width: 100%;
}
.bubble {
  position: relative;    
  display: inline-block;

}
.bubble:before,
.bubble:after {
  content: '';
  position: absolute;
  background-color: rgba(255,255,255,0.5);
  box-shadow: inset 0px 0px 2px 0px #000;
  border-radius: 50%;
}
.bubble:after {
  padding: 40px;  
  bottom: -40px;
  left: 0;
  animation: float 2s ease-in-out 0.2s infinite;
}
.bubble:before {
  padding: 20px;  
  bottom: -60px;
  left: -20px;
  animation: float 2s ease-in-out 0.3 infinite;
}

@keyframes float {
    0% {transform: translate(0,0) scale(1,1);}
    50% {transform: translate(0px,10px) scale(1.05,1);}
    100% {transform: translate(0,0) scale(1,1);}
}

<div class="bubble">
  <div class="bubble-inner">
  <img src="http://lorempixel.com/output/people-q-c-200-200-1.jpg" alt="Person" >
</div>
</div>