如何在图像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-qc-200-200-1.jpg" alt="Person" > </div> </div> 

Answer 2

Since your question leaves a very broad range of answers, I will give you the simplest approach to use here:

1. Getting an image from a user, assumptions:

   • Either you have your own way of getting the image from the user and do not need help in such implementation, but are able to produce this image in HTML in a manner remotely similar to the following:
   • Do not have your own way of getting an image. In that case you need help with any kind of implementation; which according to your tags: javascript/jquery/css/html allows for a wide variety, meaning I can provide with a very simple PHP alternative: PHP Upload a picture and display on page

2. Getting a bubble on the image: very broad again, but considering we have CSS available (as well as being part of the tags) then I can easily refer you to a myriad of ways of getting this done (including the answers already provided here): Speech bubble with a shadow . You would then use either pure CSS or Javascript in order to dynamically show the speech bubble on the image after the image has been successfully loaded onto the page.

HTML:

<span class="bubble">Speech bubble with a shadow</span>

CSS:

body {
    background: #d6d6d6;
    padding: 100px;
}

/* Speech bubble with a shadow */

.bubble {
    background-color: #fff0a0;
    background-image: -webkit-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
    background-image:    -moz-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
    background-image:     -ms-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
    background-image:      -o-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
    background-image:         linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
    border-radius: 5px;
    box-shadow: inset 0 1px 1px hsla(0,0%,100%,.5),
                3px 3px 0 hsla(0,0%,0%,.1);
    color: #333;
    display: inline-block;
    font: 16px/25px sans-serif;
    padding: 15px 25px;
    position: relative;
    text-shadow: 0 1px 1px hsla(0,0%,100%,.5);
}
.bubble:after, .bubble:before {
    border-bottom: 25px solid transparent;
    border-right: 25px solid #fff0a0;
    bottom: -25px;
    content: '';
    position: absolute;
    right: 25px;
}
.bubble:before {
    border-right: 25px solid hsla(0,0%,0%,.1);
    bottom: -28px;
    right: 22px;
}

3. What to worry about: custom work, at that point in time you should come back with more questions (and code please).

Regardless of how neat you wish to get this to work, you will not get a straight and exact answer from anyone unless we see more code from your side. That aside, I believe that starting simple and working up from there will take you a long way... good luck!