Connection between overlay div and corresponding destination div address

I created a linked image with an overlay div:

<div class="imageBlock">
  <a href="http://www.google.com">
    <img src="https://placeimg.com/640/480/any">
  </a>
  <a href="http://www.twitter.com">
    <img src="https://placeimg.com/640/480/any">
  </a>
  <a href="http://www.facebook.com">
    <img src="https://placeimg.com/640/480/any">
  </a>
  <div class="overlayButton">
    Go Google
  </div>
</div>

As part of the Jquery Gallery plugin, only one image is visible at a time. When clicked, it opens a lightbox slider.

My goal is to make the overlay div clickable to the same image link destination. Currently, when hovering over the overlay div it appears as a normal block.

Here is the code snippet for reference: https://jsfiddle.net/z9mda5wv/

javascriptjqueryhtmlcss

Answer №1

If you're looking for a cleaner approach, consider utilizing pseudo elements in the following manner.

This method keeps the structure neat and straightforward without any additional tags.

.imageBlock a {
  position: relative;
  display: none;
}
.imageBlock a:first-child{
  display: inline-block;
}
.imageBlock a:after {
  content: attr(data-buttontext);
  position: absolute;
  opacity: 0.8;
  background-color: black;
  color: white;
  left: 50%;
  margin-left: -75px;
  top: 50%;
  margin-top: -20px;
  height: 40px;
  width: 150px;
  text-align: center;
  line-height: 40px;
}
<div class="imageBlock">
  <a data-buttontext="Visit Google" href="http://www.google.com">
    <img src="https://placeimg.com/320/240/any">
  </a>
  <a data-buttontext="Visit Twitter" href="http://www.twitter.com">
    <img src="https://placeimg.com/320/240/any">
  </a>
  <a data-buttontext="Visit Facebook" href="http://www.facebook.com">
    <img src="https://placeimg.com/320/240/any">
  </a>
</div>

Answer №2

To achieve the desired effect, ensure the overlay is nested within the anchor tags.

<div class="imageWrapper">
  <a href="http://www.example.com">
    <img src="https://placeimg.com/800/600/any">
    <div class="overlay">
      Visit Example
    </div>
  </a>
</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

Concurrent Icons on Angular-Chart's Piechart

I recently incorporated angular-charts into my project to make the display of charts easier. Initially, setting up and rendering a pie chart was a breeze following the guidelines I found here. Here's a snippet of the code I used: <canvas id="pie" ...

javascriptangularjsangular-chart

The perspective property creates discrepancies in transform behavior between Firefox and Chrome, resulting in unexpected outcomes

While I found a similar question here, the solutions provided are outdated and do not help in my case. My issue revolves around a turning page effect that utilizes the CSS properties of transform-style:preserve-3d and perspective to create a 3D page. The ...

htmlcssfirefox3dperspective

Executing Selenium tests: utilizing the webdriver.wait function to repeatedly call a promise

Currently, I am using Selenium ChromeDriver, Node.js, and Mocha for testing purposes... I am facing a dilemma at the moment: The driver.wait function seamlessly integrates with until. I have a promise, which we'll refer to as promiseA. This pro ...

javascriptnode.jsseleniumpromiseselenium-chromedriver

What is the best way to create more room for my button arrangement?

--How can I adjust the spacing of the buttons?--The animations are working, but I need to create some padding between them-- I want all buttons to stay on the same line but with a little more space between each one--I'm still relatively new to this, s ...

htmlcss

Popup Triggered by a JavaScript Timer

Seeking assistance in creating a straightforward timer-based popup. Once the timer hits 10 seconds, the popup should become visible. The timer should pause or stop, and after clicking the 'ok' button on the popup, the timer should reset to 0. Can ...

javascriptjquery

Issue encountered while working with PostgreSQL and Sequelize when using the array_append function

I'm encountering issues with the following code snippet let user = req.user.id; await MyTable.update( {'interested': Sequelize.fn('array_append', Sequelize.col('interested'), user)}, {'where ...

javascriptnode.jspostgresqlsequelize.js

What is the best way to pass a variable using the href tag in jQuery?

for (var i in result) { $('#tgt').append( "<li><a href='/UpdateStatusData/?id='"+result[i]+" >"+result[i]+"</a></li>"); } I am facing an issue where the id is appearing blank when being extracted o ...

javascriptjqueryhtmlajax

Tips for retrieving javascript-generated HTML content

Currently, I'm attempting to retrieve article headlines from the NY Times website. Upon inspection, it appears that the HTML is being generated by Javascript since it's only visible when using the 'inspect element' feature in Firefox. ...

javajavascriptajaxparsing

"Implement a smooth scrolling animation on the page to automatically move a div element upward and lock

I am attempting to create a unique animation for a header div that involves moving it to the top of the screen when the user scrolls down. Once the header div reaches the top, I want it to stay fixed in that position. As the header div moves upwards, it wi ...

javascriptjquerycssanimationfullpage.js

Click the button to automatically generate a serial number on the form

My form includes three input fields: sl no, stationerytype, and stationeryqty. By clicking the symbols + and -, I can add or delete these fields. I am attempting to automatically generate a Sl no in the sl no field when I click the plus symbol, and adjust ...

javascriptphphtml

How can communication be established between JavaScript and a .NET app?

I've been developing a help system using HTML, and I want to include clickable links that can trigger commands in a .NET application (such as guiding users through tutorials or workflows). I have explored the TCard() method for HTML help, but it seems ...

.netjavascript

Dealing with two form submissions using a single handleSubmit function in react-hook-form

I have a React app with two address forms on one page. Each form has its own save address function that stores the address in the database. There is a single submit button that submits both fields and redirects to the next page (The plus button in the circ ...

javascriptreactjsreact-nativeformsreact-hook-form

Update the styling of buttons in CSS to feature a unique frame color other

Can anyone help me with styling Bootstrap buttons and removing the blue frame around them after they're clicked? Here's what I've tried: https://i.stack.imgur.com/jUD7J.png I've looked at various solutions online suggesting to use "ou ...

htmlcssangularbootstrap-4

What kind of GWT component features both a Button and text?

I am looking to develop a customized GWT widget that consists of a rectangular div element resembling a button, accompanied by text positioned adjacent to it. My goal is to enable the selection of this widget so that clicking on either the div/button or th ...

javacssbuttongwtlabel

Struggling to figure out Visual Studio Code - Having trouble loading images and fonts into my CSS file

It seems like I'm missing something here (just so you know, I'm totally new at this). I attempted to use fonts that are loaded on my computer for my CSS stylesheet (font file in my VSC), but no luck. I also tried using images from my files as bac ...

cssimagefonts

Retrieving PHP information in an ionic 3 user interface

We are experiencing a problem with displaying data in Ionic 3, as the data is being sourced from PHP REST. Here is my Angular code for retrieving the data: this.auth.displayinformation(this.customer_info.cid).subscribe(takecusinfo => { if(takecusi ...

phphtmlangulartypescriptionic3

Frontend update: Changing the display format for dates

Received from the backend is an array of objects (leavedays)- var leavedays = [{"_id":"62d544ae9f22d","season":2022,"name":"LEAVEDAY1","dateFrom":"2022- 07-26T00:00:00.000Z","date ...

javascriptnode.jsangularjshandlebars.jskoa

What is the best way to utilize overflow with TailwindCSS?

1. The Home Component: import React from "react"; import Title from "./Title"; import TaskInput from "./TaskInput"; import TaskList from "./TaskList"; function Home() { return ( <div className="h-scree ...

cssreactjstailwind-css

Customizable Button component featuring background image options

Need help with creating a versatile Button component in React that can easily accommodate different sizes and shapes of background images? This is how my current implementation looks like - Button.js const Button = ({ url }) => { const inl ...

htmlcssreactjsbuttonbackground-image

Sending data from PHP to JavaScript using AJAX

I'm encountering an issue trying to pass data from a PHP file to a JavaScript file using echo. My PHP file contains the following code snippet: <?php ...establishing connection and retrieving list from database... for($i=0;$i<sizeOf($li ...

javascriptphpjqueryajax