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

How can you enhance a component by including additional props alongside an existing onClick function?

As a newcomer to React and TypeScript, I've created a simple component that looks like this: const CloseButton = ({ onClick }: { onClick: MouseEventHandler }) => { const classes = useStyles(); return <CloseIcon className={classes.closeButto ...

javascriptreactjstypescript

Mastering the Art of Aligning Avatars: Effortless Right Alignment

Here's the updated version of the navigation bar: <nav class="navbar navbar-expand-md navbar-dark bg-dark static-top"> <button class="navbar-toggler" type="button" data-toggle="collapse"> ...

htmlcssavatar

differences in opinion between JavaScript code and browser add-ons/extensions

As the owner and developer of an e-commerce website, I find that potential customers often contact us regarding ordering issues. Upon investigation, we consistently discover that the problem is caused by JavaScript errors. We frequently check their browse ...

javascriptangularjsgoogle-chrome-extensionfirefox-addon

Incorporate SVG files into a TypeScript React application using Webpack

I am trying to incorporate an SVG image into a small React application built with TypeScript and bundled using Webpack. However, I am encountering an issue where the image is not displaying properly (only showing the browser's default image for when n ...

javascriptreactjstypescriptsvgwebpack

The difference between calling a function in the window.onload and in the body of a

In this HTML code snippet, I am trying to display the Colorado state flag using a canvas. However, I noticed that in order for the flag to be drawn correctly, I had to move certain lines of code from the window.onload() function to the drawLogo() function. ...

javascriptcanvashtml5-canvasglobal-variables

Chrome may clip the gradient radius when setting the focal point outside of the SVG gradient

I just joined this community and I might have some questions that could be considered too basic. Recently, I've been trying to understand SVG and came across something that left me puzzled. Take a look at this: <svg xmlns="http://www.w3.org/20 ...

csssvg

Is it possible for JavaScript within an <iframe> to access the parent DOM when

Is it possible for javascript in an iframe from a different domain to modify the parent's DOM? I need my iframed script to add new html elements to the parent page - any suggestions? Edit: One potential solution is using "Fragment ID Messaging" to co ...

javascriptdomiframecross-domain

Update and republish an outdated npm package

After successfully publishing an npm package, I attempted to make an update which unfortunately resulted in some issues. It seems that I made a mistake during the build process. Since it had been a year since my last update, I have forgotten the exact step ...

javascriptnode.jsnpm

Find unique numbers within a specified range using NodeJS

I need to update my arts on an NFT test via OpenSea API, but I'm facing an issue where the numbers are being repeated. Is there a way to select a number within a range that does not repeat? Here is my current code: const opensea = require("opense ...

javascriptnode.jsnft

Ensure that the context is used to effectively clear any existing data from the previous bar chart

I recently came across a cool codepen demo on this link. Upon clicking the first button followed by the second, the data transitions smoothly. However, there seems to be an issue where when hovering randomly over the bar charts at this source, the value ...

javascripthtmlcss

Tips for Resizing google reCAPTCHA

The problem's image is shown below: Below is the code snippet related to the issue: <div class="text-xs-center" id="DIVCATCHA" runat="server"> <asp:HiddenField runat="server" ID="hdnImageSelected" /> <div class="g-recaptcha" data- ...

htmlcssasp.netrecaptcha

Change a Character or Word in JavaScript after it's been typed

If I were to type the word "hello" into a textarea, is there a way for me to select that specific word and modify it afterwards? For instance, let's say I typed hello without hitting the space bar; could the system recognize this word and automaticall ...

javascriptjquerydomtextarea

Methods to maintain the select2 dropdown event open while interacting with another select2 dropdown

I have a situation where I need to dynamically add a class to a div whenever a select2 dropdown is open. To achieve this functionality, I am utilizing the open and close events of select2. The current code successfully adds the class when opening a selec ...

javascriptjqueryhtmlcssjquery-select2

Unable to generate new entries with HTML Form

I've been working on creating a simple form with the ability to add new seasons or entries that will be posted to a database, but I've hit a roadblock. Whenever I try to run it, the "Add more Episodes" buttons for new seasons don't seem to w ...

javascriptphphtmlmysql

Issues with syntax in AJAX programming can be a significant road

I have a function linked to an onclick button event. This function sends data via ajax to another php file. Everything was working smoothly until I tried to add an IF statement to the 'success' section, which would receive true or false from an e ...

javascriptphpjqueryajax

Create a data attribute object and assign to it the prop object received from the parent component

I am struggling with passing an object as a prop from a parent component and then utilizing it to initialize the child component with the received value. The main objective behind this is to create a dialog box that includes a child form component with mu ...

javascriptvue.jsvue-props

javascript trigger not functioning

Currently, I am working with ASP development and incorporating jQuery into my projects. One challenge I've encountered is not being able to utilize the trigger function upon page load. Interestingly, my change function seems to work smoothly, except ...

javascriptjqueryasp.net

What steps can be taken to restrict a user's access to the main page unless they are logged in?

I have created sign up and login pages using JavaScript, HTML, and PHP with a database. After a user successfully logs in on the login page, the following code is executed: sessionStorage.setItem('logged','loggedIn'); The user is then ...

javascriptphphtml

Creating a function that assigns an anonymous function which in turn returns another anonymous function

Can you explain the difference in JavaScript between these two code snippets? var reader = new FileReader(); reader.onload = (function (theFile) { return function (e) { loadData(e.target.result); }; })(file); reader.readAsText(file); a ...

javascript

retrieve the coordinates of the northwest and southeast corners of a group of markers displayed on a Google Map

Is there a more efficient way to get the NE and SW corners of a set of markers on a Google map without iterating over each marker individually using JavaScript or Google functions? function fnSetBounds(){ var lowLat = 90; var highLat ...

javascriptgoogle-mapsbounds