Remove option located on the upper right corner

Question

Remove option located on the upper right corner

My goal is to display a delete icon when the user hovers over an image. The hover effect is working fine, but I'm struggling to position the x button in the top right corner of the image.

HTML

<div class="photos">
    <div id="images">
        <a href=# data-lightbox="roadtrip">
            <img class=img width=100 height=100 alt='Unable to View' src=""></a>

        <a href="#" class="del_photo" id=""><img src="images/icon_del.gif" border="0" /></a>
    </div>
</div>

CSS

#images {
    display: inline-block;
    float: left;
    width: 100px;
    height: 100px
}

.del_photo {
    display: inline-block;
    float:right;
    margin:5px 5px 0 0;
}

http://jsfiddle.net/jHG9v/

html css

Answer 1

Answer №1

To make things simpler, consider using a relative position for your container and placing the close button in an absolute position (refer to this example):

#images {
    display: inline-block;
    float: left;
    width: 100px;
    height: 100px;
    position: relative;
}

.del_photo {
    display: inline-block;
    float:right;
    margin:5px 5px 0 0;
    position: absolute;
    top: 0;
    right: 0;
}

Answer 2

To make things simpler, consider using a relative position for your container and placing the close button in an absolute position (refer to this example):

#images {
    display: inline-block;
    float: left;
    width: 100px;
    height: 100px;
    position: relative;
}

.del_photo {
    display: inline-block;
    float:right;
    margin:5px 5px 0 0;
    position: absolute;
    top: 0;
    right: 0;
}

Answer 3

Answer №2

Utilize position:relative; and position:absolute; as demonstrated in this sample: http://jsfiddle.net/Y75va/

update

Refer to @Alexander Kludt's response for the complete code and further details.

Answer 4

Utilize position:relative; and position:absolute; as demonstrated in this sample: http://jsfiddle.net/Y75va/

update

Refer to @Alexander Kludt's response for the complete code and further details.

Answer 5

Answer №3

Update your CSS with the following code.

#gallery {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 200px;
}

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

Answer 6

Update your CSS with the following code.

#gallery {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 200px;
}

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

Answer 7

Answer №4

If you're looking to experiment with CSS, check out this code snippet

Here's a sample of CSS code:

#images {

    float: left;
    width: 100px;
    height: 100px;
    position: relative
}

.del_photo {
    position: absolute;
    right: 0;
    top: 0;
    float:right;
    margin:5px 5px 0 0;
}

Answer 8

If you're looking to experiment with CSS, check out this code snippet

Here's a sample of CSS code:

#images {

    float: left;
    width: 100px;
    height: 100px;
    position: relative
}

.del_photo {
    position: absolute;
    right: 0;
    top: 0;
    float:right;
    margin:5px 5px 0 0;
}

Remove option located on the upper right corner

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Displaying a specific section of HTML only if a certain resource bundle key is present

Is there a way to distinguish between two URL requests originating from separate HTML pages but sharing the same namespace within views.py?

Tips for adjusting text color in a paragraph based on its content

What is the best way to center a Bootstrap login form within the viewport?

Guide on integrating React.js into an HTML development webpage

Extremely efficient CSS utility classes for supreme performance

What is the best way to ensure that my Bootstrap 4 columns occupy the full width of the row?

Tips for activating list-groups upon clicking in Angular 5

Styling the Web with CSS in Django 2.0

Numerous attributes for displaying ngOption values

Developing a vertical accordion menu with AngularJS

"Exploring the World of String Slicing in JavaScript

I am looking to remove the target attribute from an anchor tag if it does not have a value assigned

Clicking the button will remove any previously applied CSS style using jQuery

Using Javascript or jQuery to trigger a Bootstrap Alert when a button is clicked

Utilizing personalized icons through importing a font in CSS

Positioning a logo in HTML/CSS so that it remains fixed at the top left corner regardless of the screen size

Retrieve the content of a single text box and display it in a div named "output" by clicking a button using ajax

Continuous loop of rotating background images

Child Component featuring an Accordion group implemented with ngx-bootstrap