Creating a shape image border with a clickable container can be achieved by using a combination of HTML and CSS

I'm trying to achieve the border effect shown in the picture while keeping the area under the frame clickable.

I've tried using a div on top of another div, which works, but the bottom div is not clickable. I also attempted using a border image, but couldn't create the left bottom corner as desired. Are there any other solutions?

https://i.sstatic.net/z8HSs.jpg

The image I'm working with is a .png file that has been cropped in the center. Here's the current code snippet:

<div id="slideshow204" class="slideshow" style="position:absolute;top:22px;right: 34px;z-index: 1;">
          ......
          </div>
        <div class="decor"><img style="position: absolute;z-index: 4;" src="http://shakeri.info/images/logo/zendeginameh.png" alt="">
        </div>
htmlbordercss

Answer №1

Issue resolved. Make sure to include 

 pointer-events: none;

in the div containing the png image to allow clicking through to elements underneath. Need more information? Click through a DIV to underlying elements

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

How do you specifically apply an Inset Border Shadow to just two sides using CSS?

Is it possible to apply the inner shadow specifically to the bottom and right sides? I've come across some hacks, but they seem to be more focused on regular border shadows. It's easier to add a drop shadow than to remove an inner shadow. -moz-b ...

css

What method can I use to enlarge the carousel component from the flowbit-svelte library?

I have been working on a project that requires a Carousel, and I decided to incorporate the flowbit-svelte carousel into my svelte project. While the carousel is functioning well, I am facing an issue with the component size. It seems to be cutting off my ...

csstailwind-csssvelteresponsivesveltekit

Enhance the visual appeal of incoming data using Angular Material's dynamic styling feature

Is it possible to enhance the text with some CSS styling to make each item stand out like in this example: https://i.stack.imgur.com/kSyZE.png I prefer not to include a cross button or provide users with the option to add tags. The data is coming from a R ...

cssangularangular-materialangular8

JavaScript tool for implementing sorting features on an HTML table

I am facing an issue with my AJAX-loaded table where I need sorting functionality implemented. Despite searching for various JavaScript plugins, none seem to work efficiently due to slow performance or errors. The structure of my HTML table is unique with ...

javascriptjqueryhtmlsorting

Compatibility with various browsers for the style 'cursor:pointer'

While exploring, I stumbled upon some CSS attributes that can turn the cursor into a hand: For IE - style="cursor: hand;" For NS6/IE6 - style="cursor: pointer;" Cross Browser - style="cursor: pointer; cursor: hand;" Interestingly, I noticed that Stack O ...

css

Performing an asynchronous AJAX request to a PHP script to compute the total sum and retrieve

I have created an HTML table and utilized AJAX to send a POST request with two arrays. The first array is named rowValues and contains three arrays, one for each row. The second array is called columnValues and also has three arrays, one for each column. ...

javascriptphpjqueryhtmlajax

Having trouble getting the styles property to work in the component metadata in Angular 2?

Exploring Angular 2 and working on a demo app where I'm trying to apply the styles property within the component metadata to customize all labels in contact.component.html. I attempted to implement styles: ['label { font-weight: bold;color:red } ...

htmlcssangulartypescript

Using the <video> element is creating a gap between itself and the element following it

I am facing an issue with a video background on my webpage. The video is perfectly positioned, but it is creating a large gap between itself and the next element. Despite checking for margins or paddings in the inspection tool, I cannot seem to find the so ...

htmlcssangular

Can Facebook share buttons or links be customized with different styles or designs?

Is it possible to customize the appearance of a Facebook share button or link using my own background image or a simple image? I have researched this issue extensively and have not found a definitive answer. The code provided on the link creates an iframe ...

javascriptphphtmlcssfacebook

Problems with scrolling in the navigation bar, main content area, and footer

The challenge Encountering a scrolling anomaly with the Navigation Bar, Body, and Footer while utilizing Bootstrap 4. Everything appears to function smoothly on the desktop view. The glitch arises when I reduce the viewport size. The body fails to stay in ...

htmlcssbootstrap-4

Utilizing Media Queries with Dynamic Vue Properties

On one of my website pages, I always have a Div element with a Background Image that changes based on Media Queries (for example, I fetch a smaller resolution from my CDN on mobile phones). However, since I retrieve the Image URL on Page Load, I need to s ...

javascriptcssvue.jsvuejs2

I am experiencing difficulty transitioning the view in React Native from a side position to an inward direction

Currently tackling a design project and encountering a roadblock in achieving a specific curved effect. Here are two images for reference: The Desired Design: My Current Progress: The basic structure is in place, but hitting a wall when attempting to cu ...

javascripthtmlcssreact-nativereact-navigation

Encountering an issue when passing a response using coverage.js

I am utilizing coverage.js to showcase data. When I pass my variable containing the coverage response into an HTML file, similar to how it's done in Angular to display expressions, I encounter a syntax error: <div class="container" style="margin- ...

javascripthtmlangularjsjson

Several A-frames with a variety of animations

Is there a way to apply multiple animations to one object in A-frame? My goal is to make a gltf model move 5 spaces backwards, and then five spaces to the left once the initial animation is finished. How can I accomplish this task? ...

htmlaframe

Is there a way to display error messages next to the input field in Bootstrap 4?

https://i.sstatic.net/0B1rM.png I am interested in changing the placement of error messages to the right side instead of the bottom of the "By" input element. Here is the code snippet: <div class="row "> <div class="c ...

htmlcssbootstrap-4styles

Rendering dynamic HTML content using EJS

I've created a blog application using Express and MongoDB, with EJS for rendering the data. My issue lies in the styling of the content to resemble a paragraph: <div class="show-post__content"> <%= post.body %> </div> The po ...

htmlnode.jsexpressejs

What is the best way to populate a dropdown menu in PHP?

I am trying to populate my combobox with names from an SQL database. I came across some code on W3schools, but I am having trouble integrating it into my own code. Currently, the combobox is filled with select, but that's not the intended functionalit ...

phphtmlajaxcombobox

Managing errors in jQuery's .ajax function

Having some issues with jQuery.ajax() while trying to fetch an html code snippet from table_snippet.html and replacing the element in my html code. The error handler in jQuery.ajax() gets triggered instead of the expected success handler. <!DOCTYPE H ...

javascriptjqueryhtmlajax

Node.js and MongoDB Login Form Integration with Mongoose

I am relatively new to web development and currently working on a simple web page for user login authentication. My goal is to verify user credentials (username & password) on the LoginPage from a mongoose database, and if they are correct, redirect them t ...

javascripthtmlnode.jsmongodbexpress

What is the best way to eliminate the gap between header, content, and footer sections when in mobile view?

This issue seems to only occur in mobile mode, where the blueviolet line is coming from the background color. https://i.stack.imgur.com/VBhIp.png link to the image body { background-color: blueviolet; } header, main, footer { background-color: #ff ...

htmlcss