JSFiddle - React, Tailwind, and code Playground

HTML

<div class="hover_img"><a href="#">action menu<span><img src="img/screenshot/actionmenu.jpg" alt="image" height="50" /></span></a></div>

CSS

.hover_img { display:inline }

.hover_img a { position:static; }

.hover_img a span { position:fixed; bottom: 40%; right: 0; z-index:99; opacity: 0.0; transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -webkit-transition: opacity 1s ease-in-out; }

.hover_img a:hover span {  opacity: 1.0; transition: opacity .55s ease-in-out; -moz-transition: opacity .55s ease-in-out; -webkit-transition: opacity .55s ease-in-out; }