How to overwrite an image using text that is not clickable?

Question

all right? Well, I come across this topic to ask you the following:

I need to create a way to overlay a text on an image, but I want the image to be a clickable item! That is, I want the text to overlap the image, but, that it (the text) is not selectable.

Example of what I did:

When passing over the text, it appears as a clickable text (you can select, copy, paste, click), and I just want it to appear there, without having any kind of interaction.

CSS of text:

.module .content .items .item .data {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: auto;
padding: 20px;
z-index: 20;
transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;}

CSS of image

.module .content .items .item .poster {
width: 100%;
height: 100%;
float: left;
position: relative;
overflow: hidden;
margin: 0;
padding-top: 140%;}

I really appreciate anyone who can help me!

Answer 1

To prevent any kind of mouse interaction, you must use two CSS properties:

• user-select as none, that will prevent text selection;
• pointer-events as none, which will prevent any other mouse interaction.

So just add:

seletor {
  user-select: none;
  pointer-events: none;
}

To the element that wants to prevent interactions. :)

Reference:

• pointer-events;
• user-select.

Answer 2

Try using this on css tag that has text:

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

p {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

<p>Exemplo: você não consegue me selecionar!</p>

Note: the image also cannot be selected and dragged.