Displaying a delete icon when hovering over a CSS3 div without using any JavaScript, just pure CSS3 code

.img-wrap {
    position: relative;
    display: inline-block;
}
.img-wrap .close {
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 5;
    transition: opacity 0.15s ease-in;
    padding: 5px 2px 2px;
    color: #000;
    font-weight: bold;
    cursor: pointer;
    opacity: 0;
    text-align: center;
    font-size: 22px;
    line-height: 10px;
    border-radius: 50%;
}
.img-wrap:hover .close {
    z-index: 10;
    background-color: rgb(5 0 0 / 75%);
    opacity: 1;
}
<div class="img-wrap">
    <a href="" class="close float-right red rounded-lg p-2 mr-2 mt-2" title="DELETE"><i class="fas fa-trash-alt fa-lg text-white"></i></a>
    <div class="media">
       <i class="fal fa-file fa-4x icon-pdf d-flex mr-3"></i>
       <div class="media-body">
           <h6 class="mt-0 mb-0 grey-text  font-weight-bold">This is an existing File</h6>
           <div><small><b class="mr-2">File Name</b>
                <a href="" target="_blank">${filename}</a> 
                </small>
          </div>
       </div>
    </div>                          
</div>

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

☝️This is what I want to display, but ended up like this👇

This works for images but not for div with text

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

Just need to overlay the background on hover. Currently stuck on this issue.

cssbootstrap-4responsive-designonhover

Answer №1

It seems like a potential solution to your issue is to utilize a div element (referred to as 'layer') positioned absolutely above the card, which can be displayed upon hovering over the card.

.img-wrap {
    position: relative;
    display: inline-block;
    width:200px;/* dimensions not crucial */
    height:200px;/* dimensions not crucial */
    background:#aeaeae;/* color not crucial */
}
.img-wrap .close {
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 5;
    transition: opacity 0.15s ease-in;
    padding: 5px 2px 2px;
    color: #000;
    font-weight: bold;
    cursor: pointer;
    opacity: 0;
    text-align: center;
    font-size: 22px;
    line-height: 10px;
    border-radius: 50%;
}
.img-wrap:hover .close {
    z-index: 10;
    background-color: rgb(5 0 0 / 75%);
    opacity: 1;
}

/* additional style */
.layer{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:2;
background:rgba(255,255,255,0.9);
display:none;
}

.img-wrap:hover .layer{
display:block;
}
<div class="img-wrap">
    <a href="" class="close float-right red rounded-lg p-2 mr-2 mt-2" title="DELETE"><i class="fas fa-trash-alt fa-lg text-white"> x </i></a>
    <div class="layer"> </div>
    <div class="media">
       <i class="fal fa-file fa-4x icon-pdf d-flex mr-3"></i>
       <div class="media-body">
           <h6 class="mt-0 mb-0 grey-text  font-weight-bold">This is an existing File</h6>
           <div><small><b class="mr-2">File Name</b>
                <a href="" target="_blank">${filename}</a> 
                </small>
          </div>
       </div>
    </div>                          
</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

Extra space within table in Firefox

Experiencing an issue with excess whitespace in a table on Firefox. Visit the live example at The problem can also be seen on this jsFiddle: http://jsfiddle.net/DVbCC/ In Chrome and Safari, rows are neatly arranged with minimal spacing, but Firefox show ...

htmlcssfirefoxhtml-table

The CSS scrollbar is visible on the screen, but for some reason,

I'm seeking a solution to enable scrolling within a div container that can scroll both horizontally and vertically. body { height: 100%; width: 100%; overflow: hidden; } .wrapper { width: 75%; padding: 0px 5px 0px 8px; top: 20px; whit ...

htmlcss

What are some ways to adjust the output buffer?

In an attempt to manipulate the output buffer content, I am facing a challenge. Here is what I have: if($this->page == 'login') { $output = ob_get_contents(); // $output contains index.html // u ...

phphtmlcssoutputphp-5.5

Creating rotated text in CSS for adaptable website designs

I have utilized the solution provided in a previous question I asked: Rotated text producing inconsistent results, but I am looking to display the text in a different way. Specifically, I want the first letter of the word to be at the top with the rotated ...

htmlcssrotation

What is the best way to eliminate a vertical scroll on a webpage

Struggling to achieve a responsive layout with a dynamic background image, but still dealing with unwanted scrolling. I've experimented with overflow:hidden and different background properties without success. <div class="wrap"> <div cla ...

htmlcssresponsive-designflexbox

The CSS perspective shape link is not functioning correctly

I'm attempting to create a trapezoid shape using CSS to contain a link, but it doesn't seem to be functioning correctly. I'm unsure if it's due to lack of support or if there's an issue with the code itself. It looks like it should ...

htmlcsscss-shapes

Having trouble with the :first-of-type Pseudo Class in CSS?

I have been attempting to style the first link in an li element with a specific font color. When the li element is clicked, it gains the "open" class. I've tried using both li a:first-of-type and li a:first-child pseudo-classes to achieve this, but ...

htmlcss

Troubleshooting Spacing Issues in jQuery Dropdowns

I'm experiencing difficulties with aligning text in a dropdown menu vertically. Any suggestions on how to resolve this issue? Below is the HTML and C# code: <ul class="dropdown"> <li> <p class="MenuHeading"> <a hr ...

c#jqueryhtmlcss

Can someone please provide guidance on how to focus on these boxes? (see image below)

My goal is to specifically target the boxes with white dots inside them. Each black box in this picture represents a blog post, even including the larger one at the top. I initially considered using the nth-child selector, but I'm not confident in how ...

jquerycsscss-selectors

How can I move Bootstrap 5 navbar list items to the right side?

I'm struggling to position the signup and login links on the right side of the page. I've tried using mr-auto, ml-auto, and justify-content-end but none of them seem to be working. <nav class="navbar navbar-expand-lg navbar-light"&g ...

cssbootstrap-5

Creating a dynamic pulse effect using jQuery to manipulate CSS box-shadow

My goal is to create a pulsating effect using CSS box-shadow through jQuery. Despite my best efforts, the code I attempted failed to produce the desired smooth pulse effect with box-shadow. The code snippet I experimented with: <div class="one"> &l ...

javascriptjqueryhtmlcss

Launching Stealthy Slider

I am currently having an issue with implementing Sly Slider on a free WordPress theme. I have properly enqueued the JS file, set up the HTML markup, and written a jQuery function following the documentation but it does not seem to work vertically. What cou ...

javascriptphpjquerycsswordpress

Dropdown feature in the side navigation bar

Is it possible to create a drop-down section in a navigation bar using HTML/CSS/JS? For example, clicking on 'products' would reveal a list of products that disappears when clicked again. If this is achievable, how can it be done? I am currently ...

javascripthtmlcss

Increase the border at the bottom while hovering with React.js and the Material UI library

Can someone help me achieve a hover effect similar to the one in this question on Stack Overflow: Hover effect : expand bottom border I am attempting to create the same effect in React using makeStyles of Material UI. Here is my current code: const useSty ...

javascriptcssreactjsanimationmaterial-ui

Styling and Div Container management with Bootstrap in ASP.NET Code Behind

I am currently in the process of developing an ASP.NET application that requires the dynamic creation of "TextBox" and "DropdownList" controls. Here is the method I have been using to create "TextBox" controls: private void CreateTextBox(string id, string ...

c#cssasp.nettwitter-bootstrap-3

Tips to detect a specific animation completion on an element?

How can I ensure that a specific animation ends when multiple animations are triggered on an element? My scenario involves an overlay song list that appears when a list icon is clicked. The challenge lies in closing the menu smoothly. I have implemented a ...

javascriptjqueryhtmlcss

What is the best way to obtain a custom font for individuals without access to it?

Similar Question: How can I incorporate a non-standard font into my website? I have received a .ttf file from a client with the request that it should be used as the font for their website, and also for users to download this font if they do not alrea ...

cssfontsstylesheetfont-face

Ignoring Bootstrap Popover Placement Setting

Within my Bootstrap modal, there is a select element with options that each have detailed descriptions in Bootstrap popovers. Despite trying different values for the placement option in the popover initialization, the popover consistently appears in the mi ...

jquerycsstwitter-bootstrapbootstrap-4bootstrap-popover

The animation in jQuery is triggered to start as soon as the page loads, but in Internet Explorer, it waits until the

Upon loading my page, a jQuery animation should start automatically. Here's the code snippet responsible: function repeatscroll() { if ($('div#photoscroll img').css('margin-left') == '0px') { var margin = &ap ...

javascriptjqueryhtmlcssinternet-explorer

Sorting button causing unexpected API requests for Bootstrap-Vue table components

Currently, I am working on a project in Vue2 where I am following the 1 file = 1 component pattern. For implementing a Bootstrap-Vue Table Component, I am using the provider to pass items. An issue I am facing is that when I click the sort button too qui ...

vue.jsvuejs2bootstrap-4