accessible corner images

it sucks to not be able to friend request someone or read their about because images are in the way. I used some simple code to fix this.

start with your standard corner image code. I'll use this one from @kneehichaos.

add this after opacity: 1;: pointer-events: none;

now you can interact with (click or highlight) anything behind the image, even if you can't see it. let's make it visible too! the following code will make the image fade out after a certain amount of time so you can see what's underneath it:

@keyframes fadeImage { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0; } }

add this under pointer-events: none;: animation: fadeImage 2s ease 1s 1 normal forwards;

2s means the image will last 2 seconds before it fades. you can change 2s to 5s or 10s or whatever you like.

below is a working example:

<style>
.image {
    background: url('https://i.postimg.cc/q7cVYvtZ/winky.gif') no-repeat;
    background-size: 100%!important;
    position: fixed;
    right: 0px;
    bottom: 0px;
    height: 320px;
    width: 300px;
    z-index: 1001;
    opacity: 1;
    animation: fadeImage 2s ease 1s 1 normal forwards;
    pointer-events: none;
}
@media (max-width: 600px) {
.image{display:none;}
}

@keyframes fadeImage { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0; } }

</style>
<div class="image"></div>

please use to make your page more accessible! no need to ask, credit me, or comment (unless you have a question). I am probably not the first to come up with this but I haven't seen it anywhere else.