creating a stacked image effect with css

Question:

How can I insert new_icon inside app_icon like the image below?

One condition must be met: .img-icon and .td-icon cannot be altered

CSS:

.img-icon
    max-width: 100%
    min-width: 40px
    height: auto
    vertical-align middle
    margin-top 20px
    margin-right 20px

.icon_new
    ?????

.td-icon
    width: 30%
    margin: auto

HTML:

<p class="td-icon">
    <div class="icon_new"><img src="new_icon.png" height="14"></div>
    <img class="img-icon" src="app_icon.png" height="72" width="72">
</p>

Image:

https://i.sstatic.net/DZXAy.png

htmlcss

Answer №1

Give this a shot (check out the css notes)

.img-icon
    max-width: 100%
    min-width: 40px
    height: auto
    vertical-align middle
    margin-top 20px
    margin-right 20px
    position:relative;      /* include so you can apply z-index to have it appear under new icon */
    z-index:1;

.icon_new
    position:absolute;      /* place it in top right corner */
    top:5px;                /* adjust top and right positions as needed */
    right:5px;
    z-index:2;              /* ensure it's above original icon */
    display:inline-block;   /* optional for div width to match image */

.td-icon
    width: 30%
    margin: auto
    position:relative;       /* necessary for absolute positioning of new icon */

For further details on css positioning and z-index values

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 dynamic grid layout using a single unordered list (<ul>), with the help of CSS styling and possibly some JavaScript magic

Here is an example of my extensive HTML code, filled with links: <-- language: lang-html --> <ul> <li><a href="/link.html">Link1</a></li> <li><a href="/link.html">Link2</a></li> < ...

javascriptcsshtml-listsmultiple-columns

Steps to set Option one as the selected value following a click event or an onClick function:

I'm having trouble getting this code to change the default option value! JS <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script type="text/javascript"> function updateDefa ...

javascriptjqueryhtml

Is there a problem with the background size?

I am struggling with scaling a giant background image to be 100% of the browser size. The issue arises when the webpage height is greater than that of the browser. For example, if the browser is 1000x1000 and my website is 1000x1500, scrolling down causes ...

htmlcss

The appearance of my website appears differently depending on the resolution

Just recently, I began exploring the world of HTML/CSS/JS and created a handy tool for my personal use. However, I encountered an issue when viewing it on different resolutions which caused some elements to look distorted. The tool I made allows me to inp ...

javascriptjqueryhtmlcss

Preventing selection of past dates with Material UI in ReactJS

I'm currently working on a date range picker using react material ui. The goal is to allow users to select a specific date and then disable all past dates from that selected date onward. How can I go about implementing this functionality in react mate ...

javascripthtmlreactjsmaterial-ui

Transforming the playbackRate property of a web audio-enabled audio element

I recently experimented with integrating an audio element into the web audio API using createMediaElementSource and achieved success. However, I encountered an issue when attempting to change the playback rate of the audio tag. Despite trying multiple appr ...

javascripthtmlhtml5-audioweb-audio-api

What is the best way to customize a hyperlink to match the current webpage design?

I have created a navigation bar at the top of my website screen. I want to implement a feature where the word corresponding to the current page is highlighted. For example, if I am on the "Contact" page, the word "Contact" should be highlighted, and so o ...

htmlcss

The small screen @media query is malfunctioning and not displaying correctly

After creating an HTML file and CSS file, I have encountered a styling issue. When viewing the output on a larger screen, the text "I LOVE CODING, I WILL BECOME AN EXPERT." should be displayed in blue on a red background. However, on smaller screens, it ne ...

htmlcss

Tips for adjusting HTML and CSS for mobile devices

When implementing a countdown on my website, I encountered a formatting issue when accessing it from a mobile device. The countdown is displayed on two lines instead of one, making it look strange and difficult to resize. The current code I am using: ...

htmlcssresponsive-designmedia-queries

unable to decrease the gap between the rows of the table

I'm currently developing an application that involves a table with rows and columns, along with a checkbox container arranged as shown in the image below: https://i.stack.imgur.com/QoVrg.png One issue I'm facing is getting the letters A, B, C, ...

htmlcsshtml-table

Transforming the color of a globe from black to white with gio js

After searching for a solution to change the color of a Three.js globe, I came across a link that didn't work as expected: Change the color of a Three.js globe. My goal is to change the globe color from black to white using . I attempted to use the f ...

javascriptjqueryhtmlcssthree.js

Padding on hover for navigation bar dropdowns

Having issues with a drop-down navigation menu that works fine except for the "videos" item. The hover color change doesn't cover the entire width due to padding settings. Struggling to fix this without affecting the "photography" item. Need help figu ...

htmlcss

The onclick function appears to be ineffective when used on a button loaded via Ajax

I have a situation with my website where, upon selecting a day, some forms are loaded via an Ajax request. Inside this loaded content (which I add to a modal), there is a button <button class="btn btn-success" type="button" onclick="addInput()" name=" ...

javascripthtmlajax

Is it possible to retrieve a (escaped) HTML attribute from an XML node using XPath?

In this scenario, the XML node labeled 'description' includes HTML that has been escaped. My goal is to extract the src attribute from the first img tag. Is there a method in XPath to accomplish this task? <item> <description>&am ...

phphtmlxmlxpath

Obtain the information sent by the Jquery ajax call

Below is the code snippet in question: $.ajax({ type: 'GET', data: { s: sToSearch }, url: 'http://localhost:9809/handlers/search.ashx', }).done(function (d) { sCache[sToSearch.toLowerCase()] = d; showResult(d); }); ...

jqueryhtmlasp.netajax

What is the best way to enlarge a navbar from the top using Bootstrap 5?

I have a button labeled "MENU" at the top and a logo image below it. Currently, the menu expands from the bottom of the button. I would like it to expand from the top instead, and when the menu is expanded, the button should be under the navigation list, n ...

htmlcssbootstrap-5

Filter a list generated in real-time according to both the unique identifier and the text entered in a search box

WORKING $(document).ready(function() { $("#submit").click(function() { $.ajax({ url : "/vmstatus/", type : "POST", dataType: "json", ...

javascriptjqueryhtmlajax

Modifying the color of a non-active tab - Material UI Tabs

Is there a way to customize the color of inactive tabs in Material UI tabs? I have noticed that they currently appear black, as shown in the screenshot here: screenshot Thank you! ...

javascripthtmlcssreactjsmaterial-ui

Ways to fetch additional Product Cards using JSON and a nextPage parameter

I'm facing difficulties in nesting a fetch inside another fetch. I'm not sure if this is the correct approach, but my goal is to utilize Vanilla JavaScript to fetch another JSON from the nextPage URL within the JSON list when the "load more" butt ...

javascripthtmljsonfetch-api

Start fresh with your list styling in Sass/CSS

I'm attempting to revert ul and li elements to their default styles using a specific class, but I'm encountering difficulties in doing so. I've experimented with the inherit and initial values, but they haven't proven effective. This i ...

htmlcsssasslessstylesheet