Currently, I am working on a project where users can upload an image and based on that image, a thought bubble or speech bubble is placed on top. I need to make sure the placement is just right, but my main priority is getting a functional version up and running. I have integrated the jQuery facial recognition library for image processing, but I am struggling to find resources on how to overlay a bubble onto the processed image.
What are your thoughts on a design like this?
You could try placing the image within a <div> that has a border-radius of 50% and uses overflow: hidden. This will give the image a rounded shape.
To add some flair, you can use CSS pseudo elements like :before and :after to create two speech bubble trails.
I've even thrown in a subtle animation to make the bubbles appear to 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>To address the broad range of answers your question presents, I will offer a straightforward approach:
Obtaining an image from a user involves the following assumptions:
Adding a bubble to the image is also a wide topic, but with CSS available (as indicated by the tags), I can recommend various techniques, including those already mentioned here: Speech bubble with a shadow. You can use either pure CSS or Javascript to show the speech bubble dynamically after loading the image onto the page.
For 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));
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;
}
Though achieving perfection may require additional effort, starting with a simple approach and progressing gradually will lead you towards success. Best of luck!
As a newcomer to UI material design, I am eager to create my own customized Button Component using styled-components. I am facing a challenge in overriding the CSS based on different button variations such as "primary" or "secondary". You can find my cod ...
I wanted to create two different styles of buttons in one css file. To achieve this, I added a class to the second button using: close.getStyleClass().add("close-button"); Now, I can reference this button in the css by: .button.close-button However, I ...
An illustration of this issue is the <foot-note> custom web component that was developed for my new website, fanaro.io. Normally, in-page linking involves assigning an id to a specific element and then using an <a> with href="#id_name&quo ...
I have a list of YouTube channel names: var channels = ["MyHarto", "vlogbrothers", "pbsideachannel"]; What I want to do is go through each channel, make a request to the Youtube Data API for their subscriber count, and then add up all the subscribers. How ...
Is there a way to restructure this data? const arr = [ { "name": "a_1", "v": 1 }, { "name": "b_1", "v": 1 }, { "name": "a_2", "v": 2 }, { "name": "b_2", "v": 3 } ] into this format? [{ a: 1, b: 1 }, { ...
Looking to create a custom button with functionality similar to bold (B) but for source code (Src). I have attempted the following, however it is not fully functional: $("#elm1").editable({ inlineMode: false, minHeight: 300, buttons: ["src"], c ...
I've been trying to center an icon both horizontally and vertically inside a link using :before, but so far I haven't been successful. Despite my numerous attempts, I can't figure out why the icon won't center. Here's my HTML: & ...
I am able to retrieve the name and ID, but I am only able to display the name. I have attempted using update and afterslected methods. Currently, I have this code which works well, however, it only fetches the name! $('input.typeahead').typea ...
Is there a way to achieve this task? Here is what I'm currently working on: https://jsfiddle.net/Lg0wyt9u/967/ <li> <div class='type'><i class='fa fa-arrow-circle-right'>I</i></div> & ...
Utilizing the Metaplex Auction House CLI (ah-cli) latest version (commit 472973f2437ecd9cd0e730254ecdbd1e8fbbd953 from May 27 12:54:11 2022) has posed a limitation where it only allows the use of --token-size 1 and does not permit the creation of auction s ...
I am facing an issue with two divs containing an image that appear split in half. While this layout looks fine in Chrome, other browsers display it with some outline or layout error, causing the document to appear differently than intended. I tried using o ...
<?php include("db_connection.php"); if(isset($_POST['id']) && isset($_POST['id']) != "") { // retrieve User ID $user_id = $_POST['id']; // Retrieve User Details from database $query = "SELECT * FROM prod ...
On my webpage, I have included images with information about my project. To prevent users from downloading the images, I disabled the download option. However, users are still able to access all the images in the Sources tab by inspecting the page. Can a ...
I am currently developing a game using PHP and jQuery, but I am facing some security issues. The game involves typing combinations correctly, and when the player does so, jQuery sends an ajax request to PHP which then adds 10 points to their session. Below ...
<script type="text/javascript"> $(document).ready(function(){ $("#t_select").change(function(){ var table_name = $("#t_select").val(); $.ajax({ type: 'POST', ...
As a CSS beginner utilizing the Bootstrap framework, I have encountered an issue with my button layout on mobile devices. I have successfully created a set of buttons that display correctly on both desktop and mobile views. In the desktop view, you can se ...
Recently, I discovered the fascinating feature called Symbol Animation in Google API's documentation. All aspects of my code are functioning optimally; however, I am curious to know if it is possible to substitute an image for a symbol in the followi ...
I am currently mastering Angular and Bootstrap for a potential job opportunity, so I have decided to create a simple demo page. However, I am facing an issue with getting a new row to stack after the last div of the previous row when resizing. Initially, m ...
Recently, I have been in the process of upgrading from okta/okta-angular version 3.x to 5.x and encountered an unexpected bug. Upon startup of the application, we utilized APP_INITIALIZER to trigger appInitializerFactory(configService: ConfigService), whi ...
I am currently working on enhancing the functionality of a basic HTML page by incorporating JavaScript with multiple buttons. The problem arises when I attempt to introduce another function in my external JS file, as it causes the existing code to stop wor ...