Transformer l'image d'arrière-plan dans Div en un lien

Question

Bien qu'il existe un certain nombre de questions sur la transformation d'une image d'arrière-plan en lien ou la création d'un lien dans une div, j'ai de la difficulté à trouver une solution . Plus précisément: https://jsfiddle.net/pmcgswf4/5/. Idéalement, lorsque l'utilisateur sélectionne l'image OU la légende, il doit les amener à "personal_project_pages/crazyhearts.html".

Merci!

html:

<li> 
     <div id="crazyhearts"> 
      <div class="projects"> 
       <h2><a href=personal_project_pages/crazyhearts.html class = "alpha"> Crazy Hearts Cutting Board </a></h2> 
      </div> 
     </div> 
    </li> 

CSS:

/* Projects */ 
.projects {border-style: solid; 
    width: 99.5%; 
    height: 100%; 
    /** min-width: 630px; **/ 
    min-height: 200px; 
} 

#crazyhearts { 
    background:url("https://c1.staticflickr.com/5/4321/36112755175_f7f9ba8b84_b.jpg") no-repeat 0% 30%; 
    background-size: cover; 
    width: 100%; 
    position: relative; 
} 

a { 
    color: #214E34; 
    font-family: 'Raleway', sans-serif; 
    font-size: 13px; 
    font-weight: 900; 
    text-align: left; 
    text-transform: uppercase; 
    text-decoration: none; 
    letter-spacing: 2px; 
} 

h2 { 
    color: whitesmoke; 
    font-family: 'Orbitron', sans-serif; 
    font-size: 28px; 
    font-weight: 500; 
    text-align: left; 
    text-transform: uppercase; 
    background-color: rgba(0, 0, 0, 0.9); 
} 

Answer 1

<li> 
    <div id="crazyhearts"> 
    <a href="personal_project_pages/crazyhearts.html" class = "alpha"> 
     <div class="projects"> 
      <h2> Crazy Hearts Cutting Board </h2> 
     </div> 
    </a> 
    </div> 
</li> 

Vous êtes absent " " autour de l'attribut href et HTML5 vous permet d'enrouler une étiquette

Answer 2

HTML5 permet de il suffit d'envelopper le div dans l'étiquette d'ancrage.

<li> 
     <div id="crazyhearts"> 
     <a href=personal_project_pages/crazyhearts.html class = "alpha"> 
      <div class="projects"> 
       <h2> Crazy Hearts Cutting Board </h2> 
      </div> 
     </a> 
     </div> 
    </li>