CSS filling a height percentage from the bottom up to the top

I have a container div containing a transparent image with only a border. Here is an example:

In the "dislike" case, I am able to dynamically change the container's height percentage so it appears as if the figure is being filled. As the height grows, the color is filled from top to bottom. Is it possible to achieve the same effect in the "like" case but fill from bottom to top?

Here are the relevant CSS values:

.like{
    width:150px;
    height:55%;
    margin-right:50px;
    float:right;
    border-radius:10px;
    background-color:#159C89;
}

.Dislike{
    width:150px;
    height:45%;
    background-color:#ff0000;
    margin-left:50px;
    float:left;
    border-radius:10px;
}

Answer №1

Check out this demo for a helpful example: DEMO

<div class="status indicator" data-total="100" data-filled="70">
  <div></div>
</div>
<div class="status indicator" data-total="25" data-filled="15">
  <div></div>
</div>
<div class="status indicator" data-total="10" data-filled="6">
  <div></div>
</div>

Answer №2

To accomplish this, JavaScript can be utilized.
In a scenario where the like percentage stands at 55%, there will be an empty space of 45% remaining.
Therefore, by setting this 45% as the margin-top value for the '.like' class using JS,
When applying margin-top, it causes the element to shift downwards, giving the appearance that it is filling up from the bottom!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a fixed-item navbar for sm-md sizes in Bootstrap 4: Step-by-step guide

I'm looking to create a navigation bar that maintains its proportions in small and medium column sizes. I am inspired by the navbar design on nm.org and want to achieve a similar fixed proportion no matter the size of the viewport. I have experimente ...

Utilizing JavaScript and the Document Object Model (DOM) to display images within a

My main goal is to have images load dynamically as the background of the browser frame, without any white spaces or repeats. I've successfully achieved this statically, but now I want to implement it so that different images are generated randomly. W ...

What is the best way to add an image using php, javascript, and browser storage?

Previously, I successfully uploaded an image using PHP and HTML. Now, I need to achieve the same with JavaScript (js) and AJAX. Additionally, I have been advised to utilize local storage for server-side storage before inserting it into the database. Below, ...

Why do I have to press the button twice for it to actually work?

I am new to programming and I want to create something that has 3 buttons to control the display of 3 hidden images respectively. When I click the first button, the image appears immediately, but I have to click it twice to show the second image. Can anyon ...

Execute a function when the submit button is clicked

Here is an example of html text input and javascript code: <input type="text" name="statuspopup" id="statuspopup" value="" /> <script type="text/javascript"> function SubmitTicketForm() { return CheckRequired(); if($('#statuspopu ...

Despite the fact that the toggle button in React is designed to function properly, it is currently not working as

Check out step #2 of this challenge where a toggle button is used to switch between displaying monthly and yearly values. Here's the accompanying code: import { NavLink } from "react-router-dom"; import { useContext } from "react"; ...

utilizing PHP and AJAX to showcase data in an HTML table

I'm new to AJAX and I want to display an HTML table that is generated from PHP when a generate button is clicked. Below is the code snippet in my HTML file: function showHint() { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, C ...

Design the spans to have equal heights that adjust dynamically based on the content entered

I'm facing a challenge that I've been trying to resolve using just CSS, but I've hit a roadblock. The issue at hand involves aligning multiple spans next to each other and making them equal in height. The height is not fixed and depends on ...

Issue in Ionic 3 where ion-list does not scroll vertically on iOS devices when ion-items are dynamically generated using ngFor within the ion-list

When using Ionic v3 to develop a hybrid app, I encountered an issue where ion-items within an ion-list generated using *ngFor are not scrollable on iOS devices. Strangely, this problem does not occur on Android devices. Here is the HTML code snippet: < ...

Python code encountering issues within Django framework

I'm having trouble showing and hiding HTML elements based on the data I receive after clicking a button. The output of another Python file will generate this data, but the if statement doesn't seem to be working as expected: {% if data == 'e ...

I would like to know how to create an animated effect where an Element slides into view when a user selects an option from a drop-down menu

Is there a way to make an element on my page slide in automatically after 3 seconds when the page is opened, and then slide out once the user selects their desired choice from a dropdown menu (which is the Element)? I would like the sliding effect to come ...

Change HTML to PDF with the ability to split text at page breaks

I recently attempted to convert an HTML/CSS document into a PDF file using the pdflayer.com API. Everything seemed to be working well, but I encountered a problem with line breaks splitting lines, as shown in this photo: https://i.sstatic.net/1tqKM.jpg I ...

Blip of an image then vanishes

Within my web application, I have implemented code to display images and allow users to navigate through them using Next and Previous buttons. The functionality works as expected, but there is an issue where the image briefly flashes and then disappears wh ...

Assignment on Ionic's Cascading Style Sheets classes

As I work on styling my app, I find myself struggling with the extra CSS classes that are added when I preview the source in a running app. It's particularly confusing when all I want to do is change the menu header background. In my app.html file, I ...

Identifying the completion of loading a HTML page using an object tag

I am trying to load an HTML page using an object tag, and once the page is fully downloaded, I want to display something. I have attempted the following approach, but it is not working: document.querySelector(".obj_excel").addEventListener("load", funct ...

What are the specifications for the opacity, width, and height of the background image in Bootstrap's

My current project has specific requirements that I need assistance with: I need the background image of the jumbotron to fit the width of the page and have its height scaled proportionally. The opacity of the jumbotron's background image should be ...

What's causing the excessive amount of white space in my image?

Whenever I include a picture of myself on the page, it creates excessive white space at the bottom. I'm not sure why this happens, but removing the image eliminates the white space. I've attempted adjusting the margins and padding, as well as se ...

Performing automatic submission of form data without needing to redirect or refresh the page using Javascript

I am trying to find a way to automatically submit form post data without the page redirecting, but I haven't had success with any of the examples I've found that involve jquery and ajax. Currently, my code redirects the page: <!DOCTYPE html& ...

Responsive photo gallery that fully covers your entire screen with stunning images, designed in HTML

Is there a way to adjust the div containing photos to take up all available space without large margins within the row, while also maintaining a consistent height for all photos in both horizontal and vertical orientations and ensuring responsiveness? The ...

Challenges arise with setting the background-color for a bootstrap 4 navbar

Hey there, I'm having trouble changing the background color and opacity of a navbar using rgba. Can anyone provide some guidance on this issue? #navbarr { background-color: rgba(0, 0, 0, 0.8); } <div class="navbar navbar-dark bg-dark fixed-top ...