CSS Position an icon at the top right of the image

advertisements

I'm trying to position a close icon from bootstraps sprite, in the top right side of the image ( not the box). I took this from a working example, but it wont work for me. It always ends up outside the box and at the right corner of the screen.

How can I get this right? I've setup a fiddle, but could not figure how to get the sprite in there. Can you help?

Fiddle

<!DOCTYPE HTML>
<html>
<head>
<link media="screen" type="text/css" href="icons.css" rel="stylesheet">
    <title>Delete Image Icon Dev</title>

<style>

img.thumbnail {
    background: none repeat scroll 0 0 #FFFFFF;
}

.image:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.image {
    -moz-box-sizing: border-box;
    border: 1px solid #DDDDDD;
    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1);
    float: left;
    height: 150px;
    margin-bottom: 10px;
    padding: 10px;
}

.image img {
    vertical-align: middle;
}

.delete {
    position:absolute;
     top:0;
    right:0;
}

</style>

</head>

<body>
    <div class="image"><img class="thumbnail" src="http://i.imgur.com/dsPfaSjs.jpg"><i class="icon-remove blue delete"></i></div>
</body>

</html>


This example can take an image of any height.

  1. Turn the <i class="delete"> into a <div>

  2. Wrap the <img> with the new delete div

  3. Give .image:before a min-height: 150px; and remove the fixed height on .image

  4. Apply position: relative to .delete

  5. Apply the delete button to a pseudo elment with .delete:after or place another <i> to make it interactive.

Have an example!

Example without the delete pseudo element

HTML

<div class="image">
    <div class="icon-remove blue delete">
        <img class="thumbnail" src="http://i.imgur.com/dsPfaSjs.jpg">
        <!-- <i class="delete-button"></i> if you need to use a real element -->
    </div>
</div>

CSS

.image:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    min-height: 150px;
}

.image {
    -moz-box-sizing: border-box;
    border: 1px solid #DDDDDD;
    float: left;
    margin-bottom: 10px;
    padding: 10px;
}

.delete {
    position: relative;
    vertical-align: middle;
    display: inline-block;
}

.delete:after {
    content: '';
    position:absolute;
     top:0;
    right:0;
    height: 20px;
    width: 20px;
    background: #F00;
}

/* If you need to use a real element remove .delete:after and use this  --
.delete .delete-button {
    content: '';
    position:absolute;
     top:0;
    right:0;
    height: 20px;
    width: 20px;
    background: #F00;
}*/