Is there a way to place a clickable icon above images in a flexbox grid, specifically in the bottom right corner?

Can someone help me place an icon like this over my flexbox image grid in my project? I want the icon to be clickable so that when it's clicked, the image will pop up large. Any assistance would be greatly appreciated! Thank you!

See below for the code:

@import url('https://fonts.googleapis.com/css?family=Montserrat');
.heading {
  display: inline-block;
  font-family: "Montserrat";
  font-weight: lighter;
  text-align: left;
  margin-left: 20vw;
  line-height: 30vw;
}

body {
  width: 100%;
  margin: auto;
  font-family: 'Montserrat', sans-serif;
  background-color: white;
}

Screenshot of the website:

htmlcssflexbox

Answer №1

I had a bit of trouble working with the code you provided due to images not displaying, so here's a simplified example that might be easier to understand.

To make things clearer, the container div surrounding the images should have position: relative, while the icon that will be clicked can have position: absolute applied to it. Using directional rules, you can precisely position the icon in relation to the container div.

.image-wrapper {
  display: inline-block;
  position: relative;
}
.clickable-icon {
  display: inline-block;
  position: absolute;
  right: 20px;
  bottom: 20px;
  color: white;
  font-size: 40px;
  cursor: pointer;
}
.clickable-icon:hover {
  color: red;
}
<div class="image-wrapper">
  <img src="https://picsum.photos/200" />
  <span onClick="alert('ya clicked me!')" class="clickable-icon">X</span>
</div>

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

What is the best way to center-align a child DIV (not vertically)?

After spending an entire day searching for a solution to align my child DIV from its parent, I realized that all my research led me to the same results. This is my first attempt at creating a webpage. Check out the result here. View the code on https:// ...

htmlcssalignment

js - stop form submission

After clicking on a button with type="submit", the front-end validation starts, but I also need to perform server-side validation using Ajax. This includes checking if the name is already being used by another person. The issue arises when switching the b ...

javascripthtmlajaxforms

What steps can be taken to convert this function into a more concise, dry function?

I'm attempting to customize a typewriter effect on my webpage, and while it successfully displays predefined data, I am struggling with converting it into a function that can receive values and then display those values. I have made attempts to modif ...

javascripthtml

Display a single button on hover in Angular 2+ framework

I'm looking to have the 'Edit' button only appear when I hover over a selected row. Here's the code: https://stackblitz.com/edit/inline-edit-change-edit2-j8b2jb?file=app%2Fapp.component.html I want the 'Edit' button to show u ...

javascripthtmlcssangular

Arrange the menu items in a column layout based on a given condition

Can someone assist me with displaying the menu subitems? I have created a plunker. Take a look at it to understand what I need (open plunker in full screen) https://plnkr.co/edit/IMEJFPfl5kavKvnUYaRy?p=preview In the plunker above, there are two dropdown ...

htmlcssangularjsangular-ui-bootstrap

creating a custom website layout

Currently, I am in the process of developing a website and I am absolutely obsessed with the page design. For instance: I have a page that can be divided into two sections - the left side and the right side. The left side consists of various menus, while ...

jsphtmltiles

Invoking a nested function within an array

I need to trigger a function with a button click. The function I want to call is nested within another function, which is part of an array. demo = { volej: function(param) { (new initChartist).users(param); }, initPickColor: function(){ ...

javascripthtml

Is there a way to manually change the field color upon approval in AngularJS?

Within my application that utilizes the MEAN stack, I am using AngularJS as the front-end technology. How can I manually change the color representation of a tolerance value to 159.06 in a table? Check out my Plunker for more details. Please refer to m ...

htmlcssangularjsmeanjs

Sizing Bootstrap Carousel Controls

Is there a way to adjust the size of controls in the bootstrap carousel using CSS? I'm working with Bootstrap 4 and have attempted the following, but it only seems to reposition them. .carousel-contol-prev { height: 26%; top: 33%; wid ...

cssbootstrap-carousel

Flow bar for micro-tasks

In my current project, I am faced with the task of organizing a series of 4 mini tasks and displaying to the end user which specific mini task they are currently on. To accomplish this, I have been utilizing image tags for each task. <img>1</img ...

javascriptjqueryhtmlcss

Adjust the color of the upcoming line I am sketching without ending the path

I am working on a paint program and encountered an issue. My goal is to create buttons of various colors that can change the color of the next stroke drawn by the user. While searching for a solution, I came across a similar question (HTML5 Canvas change ...

javascriptjqueryhtmlhtml5-canvas

The synchronization of template stamping with the connectedCallback function

Issue Explanation It appears that there is a timing discrepancy with Polymer (2.x) when querying for nodes contained within a template element immediately after the connectedCallback() function has been executed. Ideally, the initial call of this.shadowRo ...

javascripthtmlpolymerpolymer-2.x

Increasing the height of a menu using jQuery animations

Hello everyone, I'm working on a project and need some assistance with this jsfiddle: Check it out here. Currently, the box expands to a static width upon hovering, but sometimes it extends beyond the last text item causing it to slide back up when t ...

jqueryhtmljquery-uijquery-selectors

SyntaxError: An unidentified item was encountered at the <head> location

I have encountered an issue while loading a PHP file that utilizes ajax. Initially, the page loads without any errors. However, upon triggering the onclick event on a button, I receive the error message "Uncaught SyntaxError: Unexpected identifier" pointin ...

javascriptphphtmlajax

Active Tab Indicator - Make Your Current Tab Stand Out

I currently have a set of 3 tabs, with the first tab initially highlighted. I attempted to use some JQuery code in order to highlight a selected or active tab, but for some reason it is not working as expected. Any assistance would be greatly appreciated. ...

jqueryhtmlcss

What is the reason for the .foo a:link, .foo a:visited {} selector taking precedence over the a:hover, a:active {} selector in CSS?

Sample code: http://jsfiddle.net/RuQNP/ <!DOCTYPE html> <html> <head> <title>Foo</title> <style type="text/css"> a:link, a:visited { color: blue; } a:hover, a:active { ...

csscss-selectors

What methods can I implement to ensure a button illuminates only when correct information is provided?

I have developed a calculator for permutations and combinations. When either permutation or combination is selected, and the required values are entered, I want the calculate button to light up. How can I achieve this without using setInterval in my curren ...

javascripthtmlcssbuttoncalculator

The classes from TailwindCSS being passed as props in Next.js are not displaying properly when used within a map

const DummyData = [ { _id: 1, title: "lorem ipsum", desc: " ", cta: "Explore Service", ctaUrl: "/", theme: "#E4F8ED", btnTheme: "#4F9D73", links: [ { ...

cssreactjsnext.jstailwind-cssnext.js13

Showing the name of a class

Hello everyone, I have a piece of JavaScript code that generates HTML buttons when the page loads. The button attributes are fetched from a database through an ASP page. Everything is working fine except for displaying the class attribute - it shows as u ...

javascripthtml

Modify the color of the back button arrow in Ionic 3

Is it possible to change the color of the back button in Ionic 3 from white to black? Here's a screenshot showcasing the button: https://i.sstatic.net/VNgPd.png ...

cssionic-frameworksassionic2ionic3