How to position the close (X) button on the corner of an image within a CSS grid

I have a collection of images with varying sizes and ratios in a responsive CSS grid layout. Each image needs to have a close button located at the top-right corner. To achieve this, I have inserted a form within each grid cell with a button and an image inside:

<form action="/destroyImage" method="POST">
  <button type="submit" class="close  ">
    <span>&times;</span>
  </button>
  <img src="/pub/myimage123.jpg"/>
</form>

My questions are:

  1. How can I align the center of the button perfectly with the corner of the image?
  2. What is the best way to style the close button for a more visually appealing appearance (I am using Bootstrap 4)?
htmlcsstwitter-bootstrapbootstrap-4

Answer №1

If you want to add an 'X' in the top right corner, consider the following CSS code:

.AClass{
    right:0px;
    position: absolute;
}

<form action="/deleteImage" method="POST">
    <div style="position:relative;">
        <button type="submit" class="close AClass">
           <span>&times;</span>
        </button>
        <img src="/pub/myimage123.jpg"/>
    </div>
</form>

To make a more stylish cross, you could consider using Font Awesome or a similar icon library.

Answer №2

You have the flexibility to adjust the alignment of the element using the right property.

button{
  position: absolute;
  z-index: 1;
  right: 0;
}
img {
  position: relative;
  width: 100%;
}
<form action="/destroyImage" method="POST">
  <div class="1st">
    <button type="submit" class="close">
      <span>&times;</span>
    </button>
    <img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
  </div>
  <div class="2nd">
    <button type="submit" class="close">
      <span>&times;</span>
    </button>
    <img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
  </div>
  <div class="3rd">
    <button type="submit" class="close">
      <span>&times;</span>
    </button>
    <img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
  </div>
</form>

FOR GRID

To create a grid layout, you can utilize Bootstrap 4 classes like position-absolute and position-relative.

button{
  position: absolute;
  z-index: 1;
  right: 20px;
}

img {
  position: relative;
}

button span {
  color: red; // for testing purpose
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<form action="/destroyImage" method="POST">
  <div class="row">
    <div class="col-4">
      <div class="1st">
        <button type="submit" class="close">
          <span>&times;</span>
        </button>
        <img class="w-100" src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
      </div>
    </div>
    <div class="col-4">
      <div class="2nd">
        <button type="submit" class="close">
          <span>&times;</span>
        </button>
        <img class="w-100" src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
      </div>
    </div>
    <div class="col-4">
      <div class="3rd">
        <button type="submit" class="close">
          <span>&times;</span>
        </button>
        <img class="w-100" src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
      </div>
    </div>
  </div>
</form>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Steps for disabling automatic formatting in Visual Studio Code Version 1.35.1 with system setup

I am currently utilizing visual studio code for my Node JS application with mustache templating. In one of my HTML files, I have the following code: <script> {{{interface}}} </script> After the automatic formatting on save, it appears like t ...

htmlnode.jsvisual-studio-codemustache

What is the best way to keep horizontal divs aligned in a row with margins between them within a wrapper?

I have arranged three divs in a row with a 10px margin between them within a responsive layout. Currently, the divs have margin-left: 10px; margin-right: 10px; to create spacing. However, I aim to align them perfectly within the wrapper without any extra ...

csshtml

The Vue instance methods provide a way to access and manipulate formatted properties

I am looking to implement a method that will generate the appropriate email format to be used as the href value in an anchor tag. This method should return the formatted string in the following format: "mailto:[email protected]". var facultyInformat ...

javascripthtmlvue.js

Exploring menu options in a responsive web design interface

Hey, I'm having an issue with my website header. It looks great on full-width screens, but I need to address low screen resolutions using @media queries. I have a checkbox that reveals the menu items when checked. However, I'm facing an overlay p ...

htmlcss

Tips for keeping the background image in place while resizing the page

How can I set the background image for the whole page without it changing position with resizing? The image is 3065px in height so that should not be the issue. .bg { background-image: url("#"); height: 3065px; width: 100%; background-positio ...

cssbackground-image

What is the best way to activate an event listener only after a button has been clicked?

Currently, I am developing a game that includes a timer and an event listener that notifies the user not to switch tabs. However, I am facing an issue where the event listener triggers before the game's start button is clicked. Is there a way in JavaS ...

javascripthtmlbuttontabsevent-listener

No visible changes resulting from the CSS file

My project includes a CSS file named default.css, but it doesn't seem to be working or making any changes to my page This is the content of default.css: .feedbackText{ display: none; text-align: center; margin-left: 50px; color: blue; } In the HTML ...

csshtmlbootstrap-4

CSS: Element with overflowing content fails to display even with the overflow set to visible

I'm trying to enhance a fixed toolbar by adding a dropdown menu, but the .toolbar-dropdown-menu component isn't displaying correctly, as shown in this screenshot (tested on Google Chrome 80.0): https://i.stack.imgur.com/r5Cz0.png Initially, it ...

htmlcssoverflow

How can I manage the horizontal scrolling in a large, expansive HTML Bootstrap table?

Currently, I am working on a Laravel project and have encountered an issue with a table that is overflowing from the right side. Despite trying various methods for implementing horizontal scroll, none of them seem to be effective in resolving the problem. ...

csslaravelbootstrap-5

"Using jQuery to add emphasis to a table row and remove it again

I have a table with multiple rows, where I have styled each odd row in one shade of gray and the even rows in slightly different shades to make it easier to read. When clicking on a row, I am currently highlighting it with a different color to indicate wh ...

jquerycss

Converting a CSS Submenu from Horizontal to Vertical Orientation

Below is the current code snippet for my menu navigation bar: To access my live blog, please click on this link: www.4time2fun.com <div id="topmenu"> <div id="navigation"> <ul class="categories"> <li class="articles"> <a href ...

htmlcssdrop-down-menunavigationblogger

Float over Material UI Icon and Text

Currently, I am tackling a React JS Project. My task involves creating a breadcrumb that contains both text and an icon. To accomplish this, I have incorporated a material UI icon. import UpdateIcon from "@material-ui/icons/Update"; ...

cssreactjsmaterial-ui

Interrupt the current with an external factor

I am working with a flexbox layout that currently looks like this: https://i.stack.imgur.com/ULHEk.jpg My main question now is whether there is a way to disrupt the flow externally from the flexbox, so that the blocked element can move to the next positi ...

htmlcssflexboxcss-float

How jQuery stops the submission of a form

Sample HTML Code <p><select name="status" class="form-control" id="showThisItem"> <option value=""> Select Status </option> <option value="Paid"> Paid </option> <option value="Unpa ...

javascriptjqueryhtmlcss

Incorrect Media Queries breaking LayoutNote: This is a completely unique rewrite

My golden rule for media queries is set... @media only screen and (min-width: 768px) and (max-width: 1080px) { Strangely, I picked 1080 as a test number... Unexpectedly, the background color changes at 1190px when resizing my page to test breakpoints. ...

htmlcssmedia-queries

Retrieving the current value of the selected option using JQuery

I am working on a feature where I have different quantities in selects after each button click. <button type="button" class="btn btn-sm btn-primary" id="addtocart2" >Button1</button> <select id="quantity1" class="ml- ...

javascriptjqueryhtml

A guide on applying bold formatting to a specific section of text in React

I have a collection of phrases structured like so: [ { text: "This is a sentence." boldSubstrings: [ { offset: 5, length: 2 } ] } ] My goal is to display each phrase as a line using the following format: ...

javascriptcssreactjs

What is the best way to resize SVG graphics effectively?

I am in need of creating a seating chart. I have generated an SVG with the seats. <div class="seats-map"> <svg xmlns="https://www.w3.org/2000/svg" id="seats-map-svg" viewBox="0 0 1000 300"> <g data-row ...

htmlcsssvg

How can you modify a hyperlink URL before it is activated?

I'm facing an issue with a URL structure that needs updating before it is clicked. The current URL looks like this: https://url.com/a b c which is causing redirection problems because the actual link has underscores instead of spaces in its URL. Is ...

javascripthtmlangularjshref

Is there a way to completely remove an element from the dom once the ajax call has returned

I've been struggling to completely remove LI elements and their content, including the checkbox input, from the DOM without success. After an ajax callback, I am calling the following function, but it only removes the contents and not the element its ...

javascriptjqueryhtmldom