Question

I am developing a system, where each user can send personal messages to other users of the system. He can send the same message to any number of users at a time. When he selects more than one user as the target, their profile pictures are displayed below.

What I need is, whenever the user hovers his mouse over one of these pictures, I want a small cross mark to appear at the right hand top corner of the picture and when the user clicks that cross mark the user should be deleted from the target list (or any other action – doesn’t matter).

How do I achieve this? In essence I need another picture to be displayed above the profile picture (right hand top corner) and have an onclick event for that. How can this be achieved? I do not want to use absolute positioning.

Answer 1

@thirtydot I dont want to use absolute
positioning because i have many such
pictures and i may have them at many
different places on the site using
absolute positioning would mean using
javascript or jquery to calculate the
current position of the hovered
element and using that position to
assign the position of the new image
and so on. I think this is all quite
cumbersome. Isn’t there a simpler way?

Your explanation of why you don’t want to use absolute positioning now makes perfect sense.

I’m going to show you why it’s actually “the perfect tool for the job”.

You’re unaware of the fact that you can use position: relative on a parent of the element with position: absolute to make the absolute element offset from the parent instead of from the page, as explained here:

http://css-tricks.com/absolute-positioning-inside-relative-positioning/

So, a good solution to your problem is something like this: http://jsfiddle.net/CKJQ3/

And another version with minimal JavaScript: http://jsfiddle.net/CKJQ3/1/

CSS:

.imageContainer {
    position: relative;
    border: 1px dashed #444;
    float: left
}
.imageContainer img {
    display: block
}
.imageContainer .closeButton {
    position: absolute;
    top: -5px;
    right: -5px;
    display: none
}
.imageContainer:hover .closeButton {
    display: block
}

HTML:

<div class="imageContainer">
    <img src="http://www.gravatar.com/avatar/74c04b6c96836f044ed927a5db4dc92b?s=128&d=identicon&r=PG" />
    <a href="#" class="closeButton"><img src="http://dummyimage.com/16x16/f0f/fff&text=+" /></a>
</div>