Div not displaying images when clip-path CSS is used

I am facing an issue with the z-index of an image when using clip-path on a div. Can anyone help me solve this problem and easily adjust the z-index of the image? Thank you in advance.

Below is my code snippet:

.mymap {
  background-image: url("https://images.pexels.com/photos/257360/pexels-photo-257360.jpeg?auto=compress&cs=tinysrgb&h=350");
  background-repeat: no-repeat;
  -webkit-clip-path: polygon(100% 0, 100% 80%, 0 80%, 0 23%);
  clip-path: polygon(100% 0, 100% 80%, 0 80%, 0 23%);
}

.mymap {
  height: 220px;
}

.men img {
  width: 20%;
}

.men img {
  z-index: 999;
  position: relative;
}
<div class="mymap">
  <div class="men">
    <img src="https://i.pinimg.com/originals/1c/01/27/1c0127d19cdd75efb5a3eca4384658d5.png">
  </div>
</div>

You can also view the codepen link here: https://codepen.io/anon/pen/JaQoOX

I would appreciate it if someone could review my code and advise on how to fix the z-index issue.

htmlcss

Answer №1

To properly display the .mymap and .men classes, make sure to enclose them in a parent container. Set position:relative for the .container class and position:absolute for the image.

.container{
  position:relative;
}

.mymap {
  background-image: url("https://images.pexels.com/photos/257360/pexels-photo-257360.jpeg?auto=compress&cs=tinysrgb&h=350");
  background-repeat: no-repeat;
  -webkit-clip-path: polygon(100% 0, 100% 80%, 0 80%, 0 23%);
  clip-path: polygon(100% 0, 100% 80%, 0 80%, 0 23%);
}

.mymap {
  height: 220px;
}

.men img {
  width: 20%;
}

.men img {
  z-index: 999;
  position: absolute;
  top:0;
}
<div class="container">
  <div class="mymap"></div>
  <div class="men">
      <img src="https://i.pinimg.com/originals/1c/01/27/1c0127d19cdd75efb5a3eca4384658d5.png">
   </div>
</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

Creating a loading spinner in a Vue component while using the POST method

After successfully creating a loader for fetching data using the GET method, I encountered challenges when attempting to do the same with POST method. Is there a reliable way to implement a loader during the POST data process? For GET method, I set the lo ...

javascripthtmlcssvue.jsvuejs2

The parent rocks a vibrant background while its child opts for a more see-through look

Is it feasible for a parent div to have a specific background color while the child div remains transparent using only CSS? Allow me to present a diagram illustrating my desired outcome: I am unable to achieve this with two sibling Divs due to the rounde ...

css

Utilizing the Command Line/Window feature within Visual Studio Code

As a newcomer to Visual Studio Code, I'm currently using the latest Version: 1.29.1. When I used Matlab, I had access to a script window for writing code, a Command Window for testing code snippets and viewing variable values, as well as a workspace ...

javascripthtmlcssvisual-studiovisual-studio-code

Tips for updating the css class for multiple DOM elements using jQuery

I am currently attempting to modify the class property of a specific DOM element (in this case, a label tag) using jQuery version 1.10.2. Here is the code snippet I have written: var MyNameSpace = MyNameSpace || {}; MyNameSpace.enableDisableLabels = (f ...

javascriptjquerycss

Using Xpath to target elements based on attributes and retrieving the values of another attribute

I am trying to extract the datetime attribute value from each li element that contains an attribute type with the value of standard. However, my current code is resulting in an error. Here is the snippet: <li datetime="2019-06-03T14:45" offset="-135" t ...

phphtmlarraysdomxpath

Running a script only if it is visible in the viewport

Is it possible to execute a JavaScript only when it is in the browser viewport? For example, if I have a script at the bottom of a page, can I make it load only when the user scrolls all the way to the end? I've come across solutions for loading imag ...

javascriptjqueryhtmlviewport

Save a value outside of a code snippet

In my Play Framework project, I am working with a views .html file where I have the following code snippet: <script type="text/javascript"> setInterval(function() { $.get("file2", function(${list1}, ${list2}, ${list3}){ $("#result").h ...

javascripthtmlajaxplayframeworkrefresh

What is the best way to select an element that is currently visible but hidden underneath another element?

I have developed a circular graphic using primarily HTML and CSS, with some JavaScript and JQuery functionalities incorporated for text curving and planned interactions in the future. However, I've encountered an issue where clicking on the upper rig ...

javascriptjqueryhtmlcss

It appears that the pages are not able to access my CSS file

I am a beginner and recently developed a Twitter Bootstrap page for an MVC4 application. Starting with the layout: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> < ...

csstwitter-bootstrap

Discover a personalized message and alter its hue using JavaScript and CSS styling

I've hit a roadblock while creating my website with WordPress and a custom theme. Although I can easily inject custom Js or CSS, I need advice on how to achieve the following: How can I locate the symbol ★ within the content and change its color? ...

javascriptcss

"Utilize NodeJs and Multer to easily upload a variety of file types in a single form to Cloudinary

Currently, I am attempting to upload two different files within a single form in NodeJs utilizing multer and cloudinary with the .fields(fields) method. Here is an example: This is the form: <form action="/requestsList" method="POST" enctype="multipar ...

htmlnode.jsexpressmultercloudinary

Tips for displaying JSON data in HTML without the use of placeholder DIV elements

Customer Scenario: A user wants to search through Wikipedia. The search results should be limited to 5 articles, and the user should be able to view the title and introduction of each article. Developer Scenario: User input is provided via an HTML input f ...

javascriptjqueryhtmljson

Styling with CSS to ensure divs are displayed in two rows

Check out this example I found: https://jsfiddle.net/n3qs0wke/ .wrapper { max-width: 600px; border: 1px solid #333; } .big-div { min-width: 212px; min-height: 212px; max-width: 212px; max-height: 212px; display: inline-flex; ...

htmlcss

What is the best way to divide a list in a Django template?

Currently, I am working on pagination in Django and looking to display the page numbers that come after the current page. The code snippet I am using is as follows: {% for page in blogs_page.paginator.page_range|slice:"0:{{ blogs_page.number }}" %} Howev ...

pythonhtmldjango

Trying to conceal the scrollbar on MS Edge and Firefox?

Currently, I am working on a scrollable menu that requires the scrollbar to be hidden. In Chrome, I have achieved this by using the following code: .menu::-webkit-scrollbar { display: none; } I would like to know if there is an equivalent solution ...

htmlcssfirefoxscrollbarmicrosoft-edge

Adjust the size of my navigation bar to match the dimensions of the browser

I'm currently facing an issue with my website's navigation menu on mobile devices. I've been attempting various solutions to make the navigator scale up appropriately with the browser, but so far nothing seems to be working. Below is the HT ...

htmlcssmedia-queries

The functionality to organize items appears to be malfunctioning. (Javascript)

I want to add a price sorting feature that allows users to sort by either 'high to low' or 'low to high' using a drop-down menu. The products I want to sort are the w3-containers, each representing a different product. However, nothin ...

javascripthtmljquerysorting

Align the CSS dropdown content to the right rather than the left for a cleaner layout

The information in this dropdown menu is currently aligned to the left of the icon. I would like it to be aligned to the right. Thank you! <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://use.fontawesome.com/releas ...

htmlcss

Mobile Device Experiencing Constant Resizing Issues on Website

I have been working on my website for almost a year now, and I am facing an issue with its responsiveness on mobile devices. Despite using Bootstrap 4 and Ajax to load pages and modals, I can't seem to figure out what's causing the problem. Befor ...

ajaxhtmlcssbootstrap-4

Generating a div element within another div element

I have been attempting to add a new div inside an existing one using append, after, etc., but so far I have not been successful. The structure of the code is as follows: <div class="row"> <div class="col-xs-12" id="element-container"> &l ...

jqueryhtml