JSFiddle - React, Tailwind, and code Playground

HTML

<div class="imagen">
<div class="menu">
    <span class="flecha">&darr;</span>
	<ul>
        <li>
            <a class="primera" href="#">Ver online</a></li>
		<li>
            <a href="#">Descargar</a></li>
		<li>
            <a href="">Cancelar</a></li>
	</ul>
</div>
    <img src="http://brandonqr.com/images/penny-dreadful-poster-2-2.jpg" width="300px"/>
</div>

<div class="imagen">
<div class="menu">
    <span class="flecha">&darr;</span>
	<ul>
        <li>
            <a class="primera" href="#">Ver online</a></li>
		<li>
            <a href="#">Descargar</a></li>
		<li>
            <a href="">Cancelar</a></li>
	</ul>
</div>
    <img src="http://brandonqr.com/images/penny-dreadful-poster-2-2.jpg" width="300px"/>
</div>

<div class="imagen">
<div class="menu">
    <span class="flecha">&darr;</span>
	<ul>
        <li>
            <a class="primera" href="#">Ver online</a></li>
		<li>
            <a href="#">Descargar</a></li>
		<li>
            <a href="">Cancelar</a></li>
	</ul>
</div>
    <img src="http://brandonqr.com/images/penny-dreadful-poster-2-2.jpg" width="300px"/>
</div>

<div class="imagen">
<div class="menu">
    <span class="flecha">&darr;</span>
	<ul>
        <li>
            <a class="primera" href="#">Ver online</a></li>
		<li>
            <a href="#">Descargar</a></li>
		<li>
            <a href="">Cancelar</a></li>
	</ul>
</div>
    <img src="http://brandonqr.com/images/penny-dreadful-poster-2-2.jpg" width="300px"/>
</div>

<div class="imagen">
<div class="menu">
    <span class="flecha">&darr;</span>
	<ul>
        <li>
            <a class="primera" href="#">Ver online</a></li>
		<li>
            <a href="#">Descargar</a></li>
		<li>
            <a href="">Cancelar</a></li>
	</ul>
</div>
    <img src="http://brandonqr.com/images/penny-dreadful-poster-2-2.jpg" width="300px"/>
</div>

CSS

*{margin:0; padding:0}
.imagen{
    display:inline-block;
}
.menu {
    width: 240px;
    height: 320px;
    background-image: url('../Erase_una_vez_Serie_de_TV-526092991-large.jpg');
    font-size: 0.7em;
    margin: 20px;
    position: absolute; top:0, left:0}

.flecha{display:inline-block; width: 24px;height: 23px;border-radius:24px; background:#000; color:#fff; text-align:center; font-size:18px;position:relative;cursor: pointer;
}

.menu ul {display:none;background:#000}

.flecha:hover + ul{display:block;}

.menu ul:hover{display:block;}

.menu ul { list-style-type: none; border:1px solid #fff}
.menu ul li, .menu ul li a{height:25px;}
.menu ul li a {display: block; text-decoration: none;color: #f5f5f5; position: relative; text-align: center;}
.menu ul li a:hover {background-color: #6CC;color: #000;position: relative;}