Position the "SHARE" button at the exact center of both the vertical and horizontal axes of an image (activating when the cursor hovers over it)

I'm currently working on a project and I really like the design on Fancy: . When you hover over an image, the background darkens and a button appears in the front.

What I want to achieve is similar, but with a SHARE button instead. I have the image displayed as an img, and the SHARE button as the background. However, I'm struggling with darkening the image without affecting the SHARE button.

Below is my HTML code:

<div class="src">
<img src="image.jpg" />
</div>

And here's my CSS code:

.src {
    width: 100%;
    height: 100%;
    background: url('icon-share.png') center center no-repeat;
    opacity: 1;
}
.src img {
    width: 500px;
    min-height: 200px;
    opacity: 0.2;
}

If anyone can offer some help, it would be greatly appreciated.

The image always has a width of 500px, but the height can vary (with a minimum of 200px). I would also like to darken the image instead of just adjusting the opacity, but I think I can tackle that challenge.

EDIT: Just to clarify, clicking on the entire image will prompt the share dialogue. The floating SHARE button is simply there to indicate to the user that they will be sharing the image.

htmlcsssharecenter

Answer №1

If we're discussing only html and css, one option is to add a new <div> or even an <a> element within the container that holds the image.

a.share {
    position:absolute;
    width:100%; height:100%;
    background:url(path to icon) rgba(0,0,0,0.75);
    background-repeat: no-repeat;
    background-position:center center;
}

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

Angular 2: Enhancing Tables

I am looking to create a custom table using Angular 2. Here is the desired layout of the table: https://i.sstatic.net/6Mrtf.png I have a Component that provides me with data export class ResultsComponent implements OnInit { public items: any; ngO ...

javascripthtmlcssangulartypescript

Updating or swapping images using JavaScript and HTML

I am looking to implement a feature similar to Twitter, where uploading a picture automatically updates the avatar by displaying a spinner while the new image loads. I attempted to accomplish this with the following code: <script language="javascript"& ...

javascriptjqueryajaxhtml

Modify the button's color when clicked and add it to an array with JavaScript

I am currently working on changing the color of buttons to indicate a selection. When a button is selected, its value is added to an array. If the same button is clicked again, it becomes unselected and its color reverts back to the original state, with it ...

htmlarraysangularjscss

The Bootstrap dropdown feature is acting up when included in the header PHP file

I'm having an issue where the dropdown in my header.php file is not working when I include it in my home.php page. The navigation bar appears correctly, but the dropdown feature doesn't work. Can someone please assist me with this? Below are the ...

phphtmlcssdrop-down-menutwitter-bootstrap-3

Authenticating with Objective-C

I am currently developing an iPhone app that sends a username and password to a website in order to retrieve the HTML source code of the loaded page. The login information is included in the NSString *post. When I check the _responseData instance variable ...

htmliosobjective-ccocoapost

What is causing this unexpected text to display in Django when encountering errors while trying to submit a form?

On my website, there is a form that collects an employee number and validates it against another model called Salesman. It also checks if the employee's team field includes 'WF'. The validation process functions correctly and displays everyt ...

pythonhtmldjangodjango-forms

Is there a way to remove a specific row from both an HTML table and a MySQL database using CodeIgniter?

Just diving into CodeIgniter and successfully retrieved data from MySQL to display in an HTML table. Now, the challenge is to delete specific rows in MySQL. Imagine a scenario where there are 10 rows in the table, each accompanied by a checkbox, and a Del ...

phphtmlmysqlformscodeigniter

Dark Mode Caused by CSS Overriding Accordion

I'm currently using an accordion feature from Flowbite, but I am facing issues with it defaulting to dark mode upon page load. Upon inspecting the element, I discovered that there is some dark mode CSS included in the Flowbite package. In an attempt t ...

htmlcsscomponentstailwind-cssflowbite

What is the best way to enable this image lightbox to function seamlessly with both horizontal and vertical images?

Looking to create a responsive image lightbox? After starting from an example on W3Schools (https://www.w3schools.com/howto/howto_js_lightbox.asp), I ran into issues with portrait oriented images. Ideally, the solution should handle both landscape (e.g., 1 ...

htmlcss

Is there a way to showcase the information contained within a JSON array on an HTML webpage?

Looking to incorporate the data from a Json array retrieved from an API into my HTML. What steps should I take to achieve this? Below is the Json array in question: { page: 2, per_page: 3, total: 12, total_pages: 4, data: [ { id: 4, ...

javascriptjqueryhtmljsonajax

What steps can be taken to ensure the visibility and accessibility of two vertically stacked/overlapped Html input elements in HTML?

I have encountered a challenge with my HTML input elements. There are two input elements that overlap each other, and I would like to make both inputs visible while only allowing the top input to be editable. I have tried several approaches involving z-ind ...

htmlcssangulartypescriptz-index

Switch the navbar background color from see-through to black

On my website, I have set up a navbar navigation that transitions between a transparent background and a black background as the user scrolls down. However, I would like the black background to be present at all times for the navbar. I built the website us ...

htmlcssbootstrap-4

Need help triggering Ajax code upon clicking a link?

Can someone help me find the issue with my script? Below is the code snippet: <script> $(".icross").click(function(e){ e.preventDefault(); var obj = $(this); $.ajax({ type: "GET", url: "supprimer.php", data: 'id=&a ...

javascriptphphtmlajax

Enhance Your Website with Jquery and Bootstrap 4: Imrpessive Navbar Effects for Resizing

Hello, I am facing a challenge that my novice mind is struggling to overcome. Utilizing Bootstrap 4 navbar and some jquery, I managed to create a transition where an initially invisible navbar transforms into a solid color when the user scrolls beyond a ce ...

jqueryhtmlcssangulartwitter-bootstrap

Create a Bootstrap multi-bar component for visually displaying the daytime information

I am looking to create a horizontal bar with multiple intervals. Here is what I have tried so far: <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"& ...

htmlcssbootstrap-4

Creating Dynamic Dropdowns with Bootstrap 5 Animation

I've been trying to add animation to a right-aligned Bootstrap dropdown using CSS, but I'm having trouble getting it to work. I attempted setting the transition property to target the element's width, but it doesn't seem to be effective ...

csstwitter-bootstrapcss-animationsbootstrap-5

Create a wait function that utilizes the promise method

I need to wait for the constructor() function, which contains an asynchronous method handled by Promise. My goal is to wait for two asynchronous methods within the constructor, and then wait for the constructor itself. However, my code is throwing an err ...

javascriptjqueryhtml

Are there any tools you rely on for speeding up the process of developing html/css?

Have you heard of zen-coding? It's a script that generates markup based on a css-esque selector like this: div#foo > p*6 This code would generate: <div id="foo"> <p></p> <p></p> <p></p> & ...

htmlcssemmet

The email validation function is not functioning correctly when used in conjunction with the form submission

I'm currently working on my final project for my JavaScript class. I've run into a bit of a roadblock and could use some guidance. I am trying to capture input (all code must be done in JS) for an email address and validate it. If the email is va ...

javascripthtmlformsbuttonemail-validation

I am unable to see the last row of the table when I apply a condition after the table name

I need to display all the data from my table. However, if I include ORDER BY id DESC or any code after $sql="SELECT * FROM $tbl_name, the last row does not appear. <?php include "db.php"; $tbl_name="report"; // Table name $sql="SELECT * FROM $tbl_ ...

phphtmlmysql