How to overlay image after using <input />

Question

I'm working with html & css in a MVC Core project, prompting a user to upload an image:

<div class="drop-zone1">
   <span class="user_message">Click to upload</span>
   <input type="file" name="myname1" class="dz_input1" id="input1" />
</div>

However, if the image is uploaded and the user hovers over the image, I'd like to show an overlay with a trashcan icon.

If the user clicks the trashcan icon, the image is removed.

I can do this if the <input type=file /> is not used, but I don't know how to do an overlay when the <input />

is being used.

Any suggestions, or some YouTube video that shows how to do this?

Answer 1

You can use CSS to create the overlay and the trashcan icon. One way to do this is to wrap the input element in a div, and then use the div as the container for the overlay. You can set the position of the overlay to absolute and give it a higher z-index value than the input element, so that it will appear on top of the input element.

Then use the ::before and ::after pseudo-elements to create the trashcan icon. You can use the ::before element to create the background of the icon, and the ::after element to create the trashcan shape.

You can use javascript or jQuery to attach event listeners to the trashcan icon, so that when it is clicked, the image is removed.

You can also use CSS to hide the input and use a label with an image as a replacement. when the user clicks the image you can trigger the input via the label and the 'for' attribute.