CSS/Javascript show image remove x on mouseover/hover


Tags: html,css,positioning

Problem :

I would like to have a picture like:

http://www.clker.com/cliparts/q/P/p/c/m/r/gray-x-mark-md.png

I'd like it displayed in the top right corner of each of my images, 5px from the right and top of the image. I have the functions for showing and hiding the x as well as removing the appropriate elements, but I'm very bad with CSS positioning and I don't know how to get it to show in the top right corner.

code so far: http://jsfiddle.net/eetwL/



Solution :

This should be a piece of cake! You can position that element absolute, which means that it'll not flow with the layout but will instead get its position based off that of it's nearest relative parent. Let's pretend you have that "x" in an anchor, like this:

<div class="container">
    <a class="close" href="#">x</a>
</div>

You would want to make sure that there's a relative parent somewhere. This will be the starting point from which your top and right CSS rules will be applied. To make the anchor 5px from the top right of the container...

div.container {
    position: relative;
    // possibly important to set width, height, etc.
}

a.close {
    // set size, background image, etc.
    display: block;
    position: absolute;
    top: 5px;
    right: 5px;
}

    CSS Howto..

    How to know the correct css selector or group of selector for any html element quickly?

    How to disable by overriding webkit-transform and not deleting the line

    How do I change the image inside an HTML5 form-validation message?

    How to exclude Hover for Active LI (Menu)?

    How do I selectively stack columns with twitter bootstrap

    jQuery Show/Hide - CSS display values are affecting my layout

    CSS: how to stop text from taking up more than 1 line?

    How can I set a Horizontal! scroll bar for my Github page under this bootstrap theme? [closed]

    How do I displaying a list of multiple objects, one below the other, in HTML using Django?

    How to increase spacing between dt tags

    How to use an SVG as a responsive repeating webpage background?

    How to put all my elements in line horizontally and Should be Responsive using bootstrap?

    How is this put in the center using CSS?

    How to reduce the number of sprites when using css sprite technique

    How can I center an image with text that follows it using CSS?

    How to minified all js and css files using gruntfile.js in sails.js

    How to change drop-down menu to drop-up menu

    How to add/remove class to parent div according to input radio selection using jQuery?

    How to change scrollbar css at runtime with javascript?

    How to avoid overlapping between two divs positioning absolute inside a div positioning relative?

    how to make Sections in one line?

    How to display parent form when input text is on focus?

    how to highlight currently opened page link in css

    How to change css properties on hover parent element?

    How can I resize svg using CSS?

    How to make a full page JS and CSS menu

    How to Center Rotated text with CSS

    How to align item to the very bottom within flexible box layout column?

    How to create this responsive grid of different sized images with CSS & HTML, example below

    Why does a div with background-color show fixed elements below?