Tips for ensuring that image overlay remains clickable

I need to incorporate the following banner design:

https://i.sstatic.net/E1s8m.jpg (Please click on the image to view the full picture.)

Here is a visual representation of the existing bug:

https://i.sstatic.net/Q8qE8.jpg (Click to see the complete image).

The caption needs to be positioned lower, but due to using an image and absolute positioning, the red area is still part of the image. I want it to be part of the banner, as the dots in the red area should be clickable.

I have tried using a div instead of an image with a set height and adding the image as the background, but this results in the same issue. I am seeking a solution that allows me to use an image without encountering this bug. While I understand that canvas or SVG could potentially solve the problem, they are not options for this particular project.

You can observe the bug HERE.

Thank you.

htmlcss

Answer №1

To make your image work, add the CSS rule "pointer-events: none" to the wrapping element:

.curved-img-wrpr img {
    pointer-events: none;
}

With this change, the image will no longer interfere with elements below it.

The explanation by MDN states that setting pointer-events to none allows mouse events to pass through the element to reach whatever is underneath it.

I find MDN's explanation to be a clear summary of the concept.

Answer №2

It appears there could be some challenges with using pointer-events: none;, but I am uncertain about the details. When experimenting with z-index, I discovered that by assigning a value of z-index:99999 to <div class="sp-layer">, the dots on the page become interactive..!! I hope this information proves useful.

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

Limit access to a page only to designated users

Having a challenge creating a secure page for band members to access their individual band pages. In the band table, each band has four columns labeled $bandm1, $bandm2, $bandm3, and $bandm4. I attempted to create a script that extracted the session user ...

phphtmlmysqlrestricted-profiles

What is the most effective method for centering the title text in a div while keeping the remaining text left-aligned?

I am trying to create a layout with 6 divs arranged in two rows of 3. Each div should have a centered title, a centered image, and text aligned to the left underneath. What is the best approach to achieve this layout? Is it possible to center the title u ...

csshtmlcenter

Neglecting to automatically align text

My goal is to automatically align text based on the language, so that Arabic text starts from the right and English text starts from the left. After some online research, I discovered that I need to use dir="auto" in the tag and text-align: auto; in the CS ...

javascriptcssreactjstext-alignment

Use the selector on elements that have been previously chosen

Sorry if this is a silly question, but maybe today's just not my day. Say I already have a selected element, for example: let tables = $('table'); Now, what if I want to add another selector like .some-class to those tables, without creati ...

javascriptjqueryhtmljquery-selectors

Avoid the expansion of line decorations in Monaco editor

I am looking to create a Monaco editor line decoration that remains contained within its original position when I press enter after the decoration. For instance, in a React environment, if I set up a Monaco editor and add a line decoration using the code ...

javascripthtmlreactjstypescriptmonaco-editor

Creating an animated slider using CSS styling

I am currently in the process of developing a Drupal website. One of the features on the homepage includes three images displayed side by side, each representing different news articles. My goal is to have a red transparent overlay appear on the second and ...

jquerycssslider

django url path configuration

Hello, I am currently in the process of learning Django and attempting to create a basic site using django-cms. Below you will find the folder structure for my project along with some key code files: project_folder manage.py main_folder ...

pythoncssdjangodjango-cms

Ways to differentiate between buttons in a button cluster?

I have created a set of 3 buttons using the code from this resource. However, the buttons are currently positioned vertically close to each other as shown in the source code. I would like to adjust the spacing between them. Is there a way to achieve this ...

htmlcss

An issue has been identified where a single image is not displaying properly on Android devices, as well as IE7 and

Hey there! I recently created a Wordpress site and it seems that the Art Below logo isn't appearing in IE7, IE8, and Android for some reason. Would anyone be willing to help troubleshoot this issue? If you have fresh eyes, please take a look at the f ...

htmlcsswordpress

In Bootstrap 4.4.1, there is a known issue where HTML may not be rendered properly after a certain section

There seems to be an issue with the placement of my buttons section in the markup. It does not appear after the DIV containing the select tag, but it does when placed before it. I have tried moving the buttons section around to troubleshoot, and it does s ...

htmlcssbootstrap-4

Enhance the functionality of selectize.js by incorporating select options through ajax

I'm currently working on implementing options to a select box using AJAX and selectize.js. When not using selectize.js, everything functions correctly. The two select boxes are interconnected so that when one is updated, the values in the other select ...

javascriptphphtmlajax

Create a search bar using HTML and CSS that utilizes the GET method

My current challenge involves creating a search functionality using HTML based on the username entered, such as 'user'. Upon clicking the search bar, the page should redirect to http://localhost/searchuser/user I am encountering difficulties wi ...

htmlcss

How to show an image alongside a textarea in Bootstrap 4

Currently, I am facing a display issue while trying to show an image next to a textarea using Bootstrap 4. To clarify, here is the desired appearance that I aim for: https://i.sstatic.net/LJ8P6.png I want the image and textarea layout to consistently re ...

csstwitter-bootstrapbootstrap-4

Incantation within ng-include | src involving a series of characters

Is there a way to create a URL in ng-include|src by combining an expression and a constant string? I've attempted the code below, but it doesn't seem to be working. <aside ng-include src="{{staticPath}} + 'assets/tpl/products-feed-histor ...

htmlangularjs

Launching application from webpage

For the longest time, I believed that opening a program on a local machine through JavaScript or HTML was impossible due to security concerns. However, in addressing issues with a browser-based POS system, we are considering launching a desktop application ...

javascriptajaxwindowshtml

Organize pictures and words side by side on both sides at the same time

I am currently facing an issue while trying to load images and quotes vertically on the left and right side of the page. The problem arises with the 3rd image and quote due to an unexpected margin in the CSS code. Despite my efforts, I have not been able t ...

htmlcss

How to change the display property in CSS from block to none using React

Just started diving into React, and I am struggling with making the content disappear when clicking a button. Tried using state and even checked out https://jsfiddle.net/uwadhwnr/, but nothing seems to work. Feeling quite frustrated at the moment. <div ...

cssreactjs

Press the button within the <span> element using Python Selenium

I am attempting to select the download button. Here is the HTML code for the button: <a class="x-btn toolbar-menu x-unselectable x-box-item x-toolbar-item x-btn-transparent-medium" style="padding: 0px 5px; right: auto; left: 1121px; margi ...

pythonhtmlseleniumselenium-webdriverselenium-edgedriver

Ways to center text vertically using CSS

It appears that certain letters like g, y, q, etc. which have a downward sloping tail, are causing issues with vertical centering. Here is an image illustrating the problem https://i.sstatic.net/Pcnl8.png. The characters inside the green box are perfectly ...

javascripthtmlcssvertical-alignment

The usage of element h5 inside element span is not permitted in this context

Here is my code: <span> <h5>Standard Page Template</h5> <ul> <li>1 Design Concepts</li> <li>1 Free Round of Revisions</li> <li>5 Day Turnaround</li> <li>Photoshop Source File</li> < ...

csshtml