Embed the div within images of varying widths

I need help positioning a div in the bottom right corner of all images, regardless of their width.

The issue I am facing is that when an image takes up 100% width, the div ends up in the center. How can I ensure the div stays in the lower right corner even with images of varying widths?

.boxImage {
    flex: 1 1 100%;
    cursor: pointer;
    position: absolute;
    background-color: white;
    background-position: 13px 13px;
    background-repeat: no-repeat;
    height: 50px;
    width: 44%;
    border-radius: 8px;
    opacity: 1;
    top: 91%;
    left: 43%;
    max-width: 250px;
}


<div class="d">
    <div class="a">
      <img class="img-fluid" src="https://i.ibb.co/mqnwwKB/Screenshot-72.jpg">
      <!-- <img class="img-fluid Images" src="https://i.ibb.co/3p3D4h6/dmitry-bayer-276d-F1-RG67-Q-unsplash.jpg"> -->
  <div class="row b">       
    <ul class="list-inline rating-list" *ngFor="let star of stars" style="display: inline-block">
      <li (click)="countStar(star)" [ngClass]="{'selected': (star <= selectedValue)}">
        <i class="fa fa-star"></i>
      </li>
    </ul>
  </div>
    </div>
  </div>
htmlcssangulartypescript

Answer №1

To achieve the desired layout, include these styles in your CSS file. This will ensure that the white box is positioned relative to the image.

.custom{
    position: relative;
    display: inline-block;
}
.custom .imageBox{
    position: absolute;
    right: 10px;
    bottom: 10px;
}

Live Example: link

Answer №2

To achieve this effect, you can simply use a container element like a div with the CSS property position: relative. Here's an example:

.img-box-container {
  display: inline-block;
  position: relative;
}

.imageBox {
    display: flex;
    cursor: pointer;
    position: absolute;
    bottom: 9%;
    left: 43%;
    background-color: white;
    background-position: 13px 13px;
    background-repeat: no-repeat;
    height: 50px;
    width: 44%;
    border-radius: 8px;
    opacity: 1;
    
    max-width: 250px;
}
<div class="drop" >
    <div class="abc">
      <div class="img-box-container">
      
      <img class="img-fluid Images" src="https://i.ibb.co/mqnwwKB/Screenshot-72.jpg">
      <!-- <img class="img-fluid Images" src="https://i.ibb.co/3p3D4h6/dmitry-bayer-276d-F1-RG67-Q-unsplash.jpg"> -->
      <div class="imageBox">
          <div class="row divBtn">
              <a class="toggle-one">
                  <span class="nav-link btnZ"></span>
                </a>
              <a class="toggle-two">
                <span class="nav-link btnT"></span>
              </a>
              <a class="toggle-three">
                <span class="nav-link btnR"></span>
              </a>
              <a class="toggle-four">
                <span class="nav-link btnP"></span>
              </a>
           </div>
        <ul class="list-inline rating-list" style="display: inline-block">
          <li>
            <i class="fa fa-star"></i>
          </li>
        </ul>
      </div>
    </div>      
    </div>

  </div>

For a live demonstration, see it in action on this JsFiddle link

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

The entity is not validated by class-validator

Is it possible to utilize class-validator for validating columns in an Entity? The validation does not seem to work for columns: import { IsEmail } from 'class-validator'; @Entity() export class Admin extends BaseEntity { @Column({ unique: t ...

node.jstypescriptpostgresqlnestjstypeorm

Utilize Ant Design TreeSelect to seamlessly integrate API data into its title and value parameters

I am currently working on populating a Tree Select component in ANT Design with data fetched from an API. The response from the API follows this structure: projectData = ProjectData[]; export type ProjectData = { key?: number; projectId: number; ...

arraysreactjstypescriptmappingantd

Utilizing CSS to set a map as the background or projecting an equirectangular map in the backdrop

How can I set an equirectangular projection like the one in this example http://bl.ocks.org/mbostock/3757119 as a background for only the chart above the X-axis? Alternatively, is it possible to use an image of a map as a CSS background instead? .grid . ...

javascripthtmlcsssvgd3.js

Vue.js is not incrementing the counter as expected

I've encountered an issue with a button that has a click event to increment data value by 5, but instead of adding 5 it is appended by 5. Click here for the code example <div id="react"> <button @click='counter += 5'>Increment& ...

javascripthtmlvue.js

Navigating the complexities of Angular 2+ modules, exports, and services: preventing duplication of shared/reusable services

Imagine if I have the following scenario: I have imported import { HttpModule } from '@angular/http'; into my main application module (BrowserModule). In my application, I am using the Http service through dependency injection in various parts of ...

angularangular2-services

Internet Explorer 11 features a fixed "footer" positioned at the bottom of the page. If the content above exceeds the height of the window, the footer will automatically be pushed down to accommodate

I have set up a "footer" to remain at the bottom of the page and adjust its position if the content above extends beyond the window height. While this functions correctly on Chrome, I have encountered an issue with IE11 where the footer does not adjust and ...

htmlcssflexboxcross-browserinternet-explorer-11

"Angular EventEmitter fails to return specified object, resulting in undefined

As I work on a school project, I've encountered a hurdle due to my lack of experience with Angular. My left-nav component includes multiple checkbox selections, and upon a user selecting one, an API call is made to retrieve all values for a specific " ...

angulartypescript

How can you retrieve the preceding sibling using an Angular directive?

Currently, I am utilizing ELEMENTREF to interact with the DOM via Renderer2. Allow me to provide a simple example: import { Directive, Renderer2, ElementRef } from '@angular/core'; @Directive({ selector: '[appHighlight]' }) export c ...

javascriptangulartypescriptangularjs-directivefrontend

What could be causing my website's screen resolution to not fit properly on mobile devices?

Initially, the resolution perfectly matched the width of mobile devices. However, after changing the background image, for some reason, the width no longer fits the device length precisely. I've tried resetting to a point where the resolution was fine ...

javascripthtmlcssresolutionscreen-resolution

"Encountering a TypeScript error when using React Query's useInfiniteQuery

I am currently utilizing the pokeApi in combination with axios to retrieve data import axios from 'axios' export const fetchPokemonData = async ({ pageParam = "https://pokeapi.co/api/v2/pokemon?offset=0&limit=20" }) => { try ...

reactjstypescriptnext.jsreact-query

Tips for closing the navbar by clicking elsewhere on the page

Is there a way to modify my code in order for the navbar to close when clicking outside of it, while staying open if something inside it is clicked? $(document).ready(function() { $('.nav-btn').on('click', function() { $('.na ...

javascripthtmlcsstwitter-bootstrapbootstrap-5

What are some techniques for concealing a CSS transition beneath another element in both directions?

Witness the magic in action! By clicking on the black box below, a larger black box will gracefully emerge from beneath the sidebar. While it may not be as clear in jsfiddle, rest assured that this effect is more pronounced in browsers. Thanks to some clev ...

javascriptjqueryhtmlcsscss-transitions

Adding a datepicker popup to an input field in angular2 with the format of YYYY-MM-DD hh:mm:ss is as simple as following

Can someone help me with adding a datepicker popup to an input field in Angular, using the format YYYY-MM-DD hh:mm:ss? I have tried the following code in my .html file but it doesn't seem to be working. <input [(ngModel)]="date2" ngui-datetime-pi ...

angular

Is there a way to prevent an iframe from being recorded in Chrome's browsing history?

I'm in the process of developing a Chrome extension that inserts an Angular application into the user's browser window to create an interactive sidebar. I've been successful in most of my goals by inserting an iframe through a content script ...

javascripthtmlangularjsgoogle-chrome-extensionbrowser-history

What is the best way to center align the placeholder in an ion-input field?

What is the best way to center align the placeholder in ion-input? Here's a screenshot of my current ionic input fields with left alignment. I've attempted to move the alignment to the center, but I've been unsuccessful. Can someone please ...

typescriptionic-framework

Determination of Vertical Position in a Displayed Table

I am trying to incorporate infinite scrolling with an AJAX-based loader in the body of an HTML table. Here is a snippet of my HTML code: <table> <thead> <tr><th>Column</th></tr> </thead> <tbody> ...

javascriptjqueryhtmlcssscroll

Strange outcomes observed with array created from HTML code

html : <input type="text" name="ps[part1['test']]" value="testing multiple array"> Current result : [ps] => Array ( [part1['test'] => testing multiple array ) Expecting result : [ps] => Array ( ...

phphtmlarrays

Blazing Paths with an Isomorphic Application Using Inferno and TypeScript

I am currently working on building an isomorphic application using Express and Inferno. Strangely, I have not come across any similar projects online. In my attempt to create one myself by following a guide on Razzle, specifically related to Inferno, I enc ...

typescriptexpressserver-sideisomorphic-javascriptinfernojs

What is the proper way to indicate the pointer to the current element within the array?

How can I modify a code that displays a list of posts? import React from "react"; type respX = { "id": any, "userId": any, "title": any, "body": any, } interface PropsI { } interface StateI { data: respX []; } export class Compone ...

javascriptreactjstypescript

Animating with Angular 2

As I delve into this informative resource, my goal is to incorporate some animations into my applications, but I find myself grappling with understanding how the animations are triggered. HTML Component <div class="navbar navbar-default navbar-fixed-t ...

angulartypescriptangular-animations