X auf Bild bei Hover

[Sophie]

Hallo,

aufm einer Übersichtsseite möchte ich gerne Bilder löschen können. Dazu möchte ich mit der Maus über das Bild fahren und es soll ein großes X (für Löschen) erscheinen. Durch einen klick, wird das Bild dann gelöscht

<section class="pictures">
	<a href=""><img src="bilder-2017/1.jpg" alt=""></a>
	<a href=""><img src="bilder-2017/2.jpg" alt=""></a>
	<a href=""><img src="bilder-2017/3.jpg" alt=""></a>
	<a href=""><img src="bilder-2017/4.jpg" alt=""></a>
	<a href=""><img src="bilder-2017/5.jpg" alt=""></a>
	<a href=""><img src="bilder-2017/6.jpg" alt=""></a>
</section>

.pictures {
    display: flex;
    flex-wrap: wrap;
}

Jedes Bild ist 366x263px breit/hoch. Wie würdet ihr das mit dem X machen?