Cursor Is Blocking Moving Animation CSS HTML-CodePudding

My cursor is blocking my moving animation. If you do not understand what I mean, click the link to the video (below) to understand what I mean.

Stackoverflow-Help-Video ( NAME : STACKOVERFLOW-HELPVIDEO )

I want it to be unblocked, so I can hover over it and my cursor is not Blocking the Animation

I think it has something to do with the Image. I use this so when I hover over the image, so that it triggers the up moving text Animation : .imageobj:hover ~ .triggertxtandanimationobj (If you need to know). I tried to Make a animation, instead of a :hover property, which did not work. I want The txt to be invisible (For my mouse, not for me)

I will give you the code for the up moving txt, and for the Image, If you need more code, comment it! I Hope you can Help me

HTML:

<div >
    <img src="web-img/news_pic.jpg" alt="" >
          <p > Du Hast Keine Lust auf den normalen Minecraft - Playstil ?  Minecraft Impossible  Ist Eine <br> Challange für Minecraft Spieler Die Interessiert an Challanges sind !  versuche die Challange <br> Erfolgreich durchzuspielen .  Schreibe mir deine Meinung ! </p>

</div>

CSS:

.bott-info-hidden {
position: absolute;
top: 575px;
left: 70px;
text-align: none;
content: match-parent;

font-size: large;
font-family: Roboto;
font-weight: 700;
overflow: hidden;

opacity: 0;

transition: all 2s ease;
}   

.news-pic:hover ~ .bott-info-hidden {
content: match-parent;
opacity: 1;
top: 175px;
left: 70px;

cursor: none;
}

.news {
position: absolute;
opacity: 1;
z-index: 2;
text-align: center;
color: white;
top: 400px;
left: 100px;
overflow: hidden;
}

.news-pic {
height: 500px;
width: 900px;

box-sizing: border-box;
border-radius: 15px ;


-webkit-filter: brightness(100%);
}

CodePudding user response：

You can try to add pointer-events: none; to the text element that is not supposed to respond to the cursor.