Menu
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>
836
This example can take an image of any height.
Turn the <i class="delete"> into a <div>
Wrap the <img> with the new delete div
Give .image:before a min-height: 150px; and remove the fixed height on .image
Apply position: relative to .delete
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;
}*/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
