On mouse over image x in image

Question

I want to show the X mark on an image that is 24x24 in size,

for this i take the li element and in the element

<li style="display: inline-block; background: #283038; border: 1px solid #161b1f; margin: 5px; height: 25px; padding: 2px; border-radius: 3px;">
            <ul>
                <li style="width: auto; float: left;">
                    <img class='tagImage'/>
                                        <span class='removeitem'>X</span>
                </li>
            </ul>
        </li>

something like that:

My problem is in html, I cannot place the X icon in the right place. as shown in the screenshot

Answer 1

Use CSS positioning methods with display.

Here I set the first img, i.e. closing icon, on display: none;and on :hoverof divI set it to lock, make sure that you use position: relative;in the parent element, otherwise it will fly in the wild.

Demo

div {
    position: relative;
    display: inline-block;
}

div img:first-child {
    position: absolute;
    top: 10px;
    right: 10px;
    display: none;
}

div:hover img:first-child {
    display: block;
}

---

span,

2

ul > li > ul > li {
    position: relative;
}
ul > li > ul > li > span {
    position: absolute;
    top: 10px;
    right: 10px;
    display: none;
}
ul > li > ul > li:hover > span {
    display: block;
    color: #fff;
}

, , , position: absolute; position: relative; >, , li,

height: 25px;, ... ...

Answer 2

, span - . ,

li{
    width:150px;
    height:150px;
    border:1px solid red;
    margin:20px;
    position:relative;
    list-style:none;
}
span{
    position:absolute;
    top:-10px;
    right:-10px;
    display:none; 
}

li:hover span{
    display:block;   
}

HTML

<li>
    <span>x</span>
</li>

DEMO

,