JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cop" style="background: url('img/123.png') #af7ac4;">
    <div class="text">ТутНадпись</div>
	    <a href="#ссылка_обрамляющая_появляющийся_фон" class="zin">
		    <div class="menu">
				<a href="#">Редактировать</a>
                <a href="#">Удалить</a>	
			</div>
		</a>
</div>

CSS

.cop{
			width: 128px;
			height: 128px;
			float: left;
			margin: 3px;
			overflow: hidden;
			font-size: 12px;
			font-weight: bold;
			position: relative;
			}
			.text{
			width: 122px;
			height: 15px;
			padding: 3px;
			margin-top: 107px;
			color: #fff;
			background: rgba(0, 0, 0, 0.4);
			}	
			.menu{
			    background: #000000;
				width: 128px;
				height: 128px;
				position: absolute;	
				left: 0; 
				top: 0;
				display: none;
				color: #fff;
			}
			.menu a{
				color: #fff;

			}			
			.cop:hover .menu{
			display: block;
			background: rgba(0, 0, 0, 0.4); 
			cursor: pointer;
			}
			.zin{				
			position: absolute;	
			display: block;
				width: 128px;
				height: 128px;
				left: 0; 
				top: 0;				
			}
			.cop:hover .zin{
			display: none;
			}