Placing a small image on top of multiple images using CSS

I am facing a CSS issue and I need help with positioning a small image (using position absolute) like a warranty badge on top of larger images. The challenge is to ensure that the badge is fixed at the bottom left corner of each image, despite variations in their widths. Whenever I try to place the badge over the bottom left corner of an object from one image, it does not align properly on other images due to their different widths. If this explanation is unclear, please feel free to ask for further clarification.

javascriptcss

Answer №1

To achieve this effect, you can utilize CSS along with the after pseudo selector. Here is an example of how to do it.

.thing {
  padding: .5em;
  margin: .5em 0;
  position: relative;
  border: 1px solid black;
}

.computer_watermark::after {
  content: "";
  width: 150px;
  height: 30px;
  background-image: url(https://cdn.sstatic.net/Img/unified/sprites.svg?v=fcc0ea44ba27);
  background-position-x: 0px;
  background-position-y: -500px;
  position: absolute;
  right: 0;
  bottom: 10px;
}

.laptop_watermark::after {
  content: "";
  width: 150px;
  height: 30px;
  background-image: url(https://cdn.sstatic.net/Img/unified/sprites.svg?v=fcc0ea44ba27);
  background-position-x: 0px;
  background-position-y: -500px;
  filter: invert(1) hue-rotate(180deg) contrast(0.8);
  position: absolute;
  right: 0;
  bottom: 10px;
}
<div class="thing computer_watermark">
  <p>
    This is a computer
  </p>
</div>

<div class="thing laptop_watermark">
  <p>
    This is a laptop
  </p>
</div>

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

Issue with Material UI dropdown not selecting value on Enter key press

I have encountered an issue with the material UI dropdown component that I am using. When I navigate through the dropdown options using arrow keys and press enter, the selected value does not get highlighted. Below is the code snippet for the dropdown: ...

javascriptreactjsdrop-down-menumaterial-ui

Incorporate a sleek Vueitfy user interface seamlessly into your current website

Recently, I put together a sleek user interface for a web application with the help of Nuxt.js and Vuetify.js (which utilizes Vue.js code). Although my design is top-notch, I now face the challenge of integrating it into an existing website that does not ...

javascripthtmlvue.jsvuetify.jsnuxt.js

Tips for maintaining the backslash character while transforming a string into a regular expression

Received some regular expressions in a JSON object like this: { config: { regEx: "/^$/" } } Attempting to convert the string into a regex: const re = new RegExp(config.regEx); The issue is that RegExp escapes the / characters resulting in //^$ ...

javascriptjsonregex

Angular utilizing external parameter for Ajax requests

As a newcomer to Angular, I am eager to upgrade some old jQuery code with AngularJS. The task at hand is to extract a string from a span element, split it into two separate strings, and then use these as parameters in a GET request. I am dedicated to lea ...

javascriptjqueryajaxangularjs

Retrieve a photo from a website address and determine its dimensions

When grabbing an image from a URL using this function: const fetch = require("node-fetch"); function getImageFromUrl(url) { return fetch(url).then((response) => response.blob()); } To determine the dimensions of the images, I am utilizing ...

javascriptnode.jsreactjsweb

The functionality of jQuery smooth scrolling to an anchor is only effective when the page is at the top and there is

Currently, I am working on designing a simple one-page website featuring a fixed menu that smoothly scrolls to specific sections on the page upon clicking the menu items. However, I have encountered an issue where the scrolling works perfectly only when t ...

javascriptjqueryhtmlcss

React Fixed Footer Implementation against My Preferences

Here's an issue that I'm facing: https://i.stack.imgur.com/gtQqm.png The footer on my webpage is normally displayed at the bottom of the page. However, when the user performs certain actions that extend the size of the page: https://i.stack.im ...

htmlcssreactjsfooterfixed

Links have a longer transition delay compared to the content

In a unique JavaScript function I've developed, the my-content-section-visible class is removed and replaced with my-content-section-hidden. This change is being made to hide a particular div using a smooth transition effect. The transition itself is ...

javascripthtmlcss

Is there a way to display the input value from an on-screen keyboard in an Angular application?

I have included my code and output snippet below. Is there a better way to display the input value when clicking on the virtual keyboard? ...

javascriptangulartypescript

CSS - Maximizing One Column's Width While Allocating Percentage Space for Two Columns?

It's been quite some time since I delved into the world of web development and I seem to have forgotten how to tackle this particular issue. Despite hours spent searching online, I've gained knowledge about flex-boxes and other useful tools, but ...

htmlcssflexbox

What is the best way to incorporate a <c:forEach> loop into JSP operations?

I am attempting to calculate the product of two variables that are associated with an item in a loop. Below is the code snippet from the JSP file: <table> <thead> <tr> <th>PRICE</th> <th ...

javascripthtmljspjstl

Error encountered in MVC 5: When using jQuery to assign a value to an object, the

Currently tackling a web development project as a newbie in the field and running into an issue with this snippet of code (which sets the end date to tomorrow if left blank): var date = new Date($('#txtStartDate').val()); var tomorrow = date.ge ...

javascriptc#jqueryasp.net-mvc

Is it possible to easily extract all values associated with a particular key in a nested JSON using JavaScript?

I have a JSON structure that looks like this: [ { cells: [ { id: "1", cellType: 3, widget: { id: 1, description: "myDesc"} }, { id: "2", cellType: 4, widget: { id: 2, description: "myDesc2"} } ] }, { cells: [ { id: "3", c ...

javascriptarraysjsonangularecmascript-6

What steps can I take to get rid of the 'Optimize CSS Delivery' notification on my website?

Utilizing Google's PageSpeed Insights to analyze my website's speed, I have identified an issue: Your page currently has 11 blocking CSS resources, resulting in slower rendering time. About 5% of the content above-the-fold could be displayed with ...

css

TypeScript's type assertions do not result in errors when provided with an incorrect value

We are currently using the msal library and are in the process of converting our javaScript code to TypeScript. In the screenshot below, TypeScript correctly identifies the expected type for cacheLocation, which can be either the string localStorage, the ...

javascripttypescript

Preventing Repeated Clicks in AngularJS

Looking for a better approach to handle double clicks in AngularJS other than using ng-disabled. I have a solution to disable double/multi-click functionality on button click and re-enable it after completing an ajax process. Any suggestions? When our cod ...

javascriptajaxangularjs

Eliminate an item from an array of objects utilizing a specific key

Here is the JSON data provided: var data= { 'A' : { 'Total' : 123, 'Cricket' : 76, 'Football' : 12, 'Hockey' : 1, 'None' : 10 }, 'B&ap ...

javascriptjqueryjsonobjectkey-value

Mastering the art of combining images and text harmoniously

I am having trouble aligning my lion image and h1 tag side by side. There seems to be an issue but I can't figure out what it is. h2 { width:50%; float:right; padding:30px 0px 0px 0px; margin:0 auto; } .lion { width:10%; float: left; paddin ...

htmlcss

Is there a method to implement colorPicker in an Angular WYSIWYG directive without utilizing jQuery?

After removing the jQuery reference, the color picker is no longer functioning in the WYSIWYG directive. In my project, I am avoiding the use of jQuery, so is there a way to achieve this without using jQuery? Alternatively, are there any other editors av ...

javascriptangularjsangularjs-directivewysiwygcontenteditable

Guide: Writing code that caters to different types of media in React using Material-UI

After reviewing the documentation, I believed that the optimal solution in later versions of material-ui was to use useMediaQuery, but unfortunately, I am unable to implement it correctly. My objective is to hide a menu when the page is being printed, so I ...

cssreactjsmaterial-ui