Texte à côté d'une image déjà stylisée - HTML / CSS

Bonjour,

Essaye d'appliquer un vertical-align: middle; sur .image2.

La div id="img1" est mal fermée (le </div> doit être placé avant le </a> en suivant l'ordre des balises) et celle-ci semble inutile : ton hover pourrait être appliqué sur la classe .image2 : https://jsfiddle.net/63ogrLwt/

Bonjour, 

j'ai supprimé toutes les balises <div> et n'ai laissé que le <span> class="images2" </span> et ça fonctionne ! 

Pour que le texte ne soit plus sous forme de lien j'ai mit le texte après la balise </a> 

Voici donc le code fini : 

HTML : 

<h2><i>Visitez les lieux incontournables de Roubaix !</i></h2>
 
 <a href="https://www.larousse.fr/dictionnaires/francais/autre/6887"> 
    <span class="images2"></span></a> Faites le tour des endroits mythiques de la ville !
 Depuis le Musée de la piscine jusqu'à l'ancienne Usine de Roubaix, découvrez la région sous un autre angle.
    

CSS : 

.images2 {
  background-size : contain;
  background-position : 50% 50%; 
  background-image : url(musee.jpg);
  display : inline-block;
  width : 300px; height : 300px;
  border: none;
  -moz-border-radius : 200px;
  -webkit-border-radius : 200px;
  border-radius : 200px;
  box-shadow: 10px -20px;
    color: rgb(203, 203, 245);
    margin-top: 40px;
  margin-right: 10px;
  margin-left: 10px;
    vertical-align: middle;
}

.images2:hover {
  transform: scale(1.5);
  }

Cela rend comme le lien que vous avez mit dans votre commentaire sans que le texte soit un lien. Je réitère le code une dernière fois au cas où quelqu'un en aurait besoin à l'avenir. 

Je vous remercie beaucoup de votre aide, ça m'a débloqué je vais pouvoir finir le site facilement maintenant ! :) 

Bonne journée, et merci encore !