Home/ Questions/Q 414831
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T18:19:16+00:00

slight problem. I have a 20 x 20px delete icon which I want to

  • 0

slight problem. I have a 20 x 20px delete icon which I want to show overlaying a 112 x 112px image when it is hovered over. The image also has some descriptive text below, so using Safari I pulled it back up using relative positioning. The code I threw together goes something like this:

<html>
<head>
<title>Gallery Test</title>
<style type="text/css">
html
{
    background: #ebebeb;
}
.tsUser img
{
    -webkit-border-radius: 16px 16px;
    -moz-border-radius: 16px 16px;
    -webkit-box-shadow:0 2px 6px #c0c0c0;
    -moz-box-shadow:0 2px 6px #c0c0c0;
    cursor:pointer;
}
.tsUser:hover:after
{
    content: url(editor/icons/deleteIcon.png);
    position: relative;
    top: -155px;
    left: 50px;
    display: block;
}
.tsUser.current:hover:after
{
    content: "";
}
.tsUser
{
    text-align: center;
    width: 150px;
    float: left;
}
.tsUser h3, .tsUser p
{
    margin:5px 0 0 0;
    font-size: 0.8em;
}

.tsUser.current h3
{
    color: red;
}

h1:hover:after
{
    content: " And now the test is complete.";
}
</style>
</head>

<body>

<h1>Testing.</h1>

<div class="tsUser">
<img src="thumb.png" />
<h3>Title</h3>
<p>Description</p>
</div>

<div class="tsUser current">
<img src="thumb2.png" />
<h3>Title 2</h3>
<p>Description 2</p>
</div>

</body>
</html>

Why am I posting all of the source? The crazy thing is that it fails to work in Firefox. Now I don’t know whether it’s the convoluted mess of CSS3 properties, because the :hover:after on the h1 tag works perfectly, and the whole thing works in Safari.

Anyone have a fix?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I think you should simplify it.

    <div class="tsUser current">
   <img src="thumb2.png" />
   <h3>Title 2</h3>
   <p>Description 2</p>
   <a href="#close"></a>
</div>

<style>
.tsUser{text-align: center;width: 150px;float: left; position:relative; /* this is important */}
.tsUser:hover a.close {display:block}
.tsUser a.close {content: url(editor/icons/deleteIcon.png);position: absolute;top:10px; right: 10px;display: none; width: 20px; height:20px}
</style>

    by default your close image will be invisible. When you hover the div and the content inside, you will get your “display block” and the option to click it.

    • 0