Affichage/masquage de boutons

Résultat

En l'absence d'image dans le conteneur, le bouton ↻ apparaît et permet de simuler le chargement d'une image dans le conteneur associé.

En présence d'une image dans le conteneur, le bouton × apparaît et permet de supprimer l'image associée.

Principe

HTML avant ajout d'une image

<div class="item-image">
  <button class="btn-delete" title="Supprimer l'image">&times;</button>
  <button class="btn-add" title="Charger une image">&orarr;</button>
</div>

L'ordre des boutons n'a pas d'importance, ils peuvent être inversés.

HTML après ajout d'une image

<div class="item-image">
  <img src="nom-de-l'image">
  <button class="btn-delete" title="Supprimer l'image">&times;</button>
  <button class="btn-add" title="Charger une image">&orarr;</button>
</div>

L'image doit être ajoutée comme premier élément du conteneur afin d'autoriser la manipulation, via le CSS et le sélecteur « d'adjacente indirecte » ~ (tilde), des boutons.

CSS de masquage/affichage des boutons

/* btn Add en absence d'image */
/* btn Delete en présence d'image */
.item-image .btn-add,
.item-image img ~ .btn-delete {
  pointer-events: inherit;
  opacity: .25;
}
/* btn Add en présence d'une image */
/* btn Delete en absence d'une image */
.item-image img ~ .btn-add,
.item-image .btn-delete {
  pointer-events: none;
  opacity: 0;
}
/* affichage en plein au survol */
.item-image .btn-add:hover,
.item-image .btn-delete:hover {
  cursor: pointer;
  opacity: 1;
}

Le reste n'est que cosmétique.

Alternative

Une alternative en utilisant JavaScript pourrait tout à fait faire l’affaire en ajoutant des écouteurs d'événements pointerenter et pointerleave sur les conteneurs <div class="item-image"> et de tester la présence d'une image dans ceux-ci afin d'ajouter/enlever une classe sur les boutons concernés.