Link over div with background image and hover effect

Question

I have the following grid of divs

<div id="container">
<div class="imgContainer">
<div class="ar-image">
     <div style="background: url('http://maximumwallhd.com/wp-content/uploads/2015/06/fonds-ecran-plage-palmier-12-660x330.jpg')" class="article-image"></div>
       <p class="descfirst">Progressive</p> 
       <div class="first"><span class = "green" style="width: 85%"></span></div>
       <p class="descsecond">Happy</p> 
       <div class="second"><span class = "green" style="width: 55%"></span></div>
       <p class="descthird">Creative</p> 
       <div class="third"><span class = "green" style="width: 43%"></span></div>
       <p class="descfourth">Slow</p> 
       <div class="fourth"><span class = "red" style="width: 75%"></span></div>
       <p class="descfifth">Boring</p> 
       <div class="fifth"><span class = "red" style="width: 65%"></span></div>
       <p class="descsixth">Text</p> 
       <div class="sixth"><span class = "red" style="width: 60%"></span></div>


       <h1 class="topleft">1 | Scooter</h1>
       <h3 class="topright">Rock</h3>
       <h3 class="bottomleft">T 21%, C 6%</h3>
       <h3 class="bottomright">XXX</h3>
</div>
<div class="ar-image">
     <div style="background: url('http://maximumwallhd.com/wp-content/uploads/2015/06/fonds-ecran-plage-palmier-12-660x330.jpg')" class="article-image"></div>
       <p class="descfirst">Progressive</p> 
       <div class="first"><span class = "green" style="width: 85%"></span></div>
       <p class="descsecond">Happy</p> 
       <div class="second"><span class = "green" style="width: 55%"></span></div>
       <p class="descthird">Creative</p> 
       <div class="third"><span class = "green" style="width: 43%"></span></div>
       <p class="descfourth">Slow</p> 
       <div class="fourth"><span class = "red" style="width: 75%"></span></div>
       <p class="descfifth">Boring</p> 
       <div class="fifth"><span class = "red" style="width: 65%"></span></div>
       <p class="descsixth">Text</p> 
       <div class="sixth"><span class = "red" style="width: 60%"></span></div>
       <h1 class="topleft">1 | Scooter</h1>
       <h3 class="topright">Rock</h3>
       <h3 class="bottomleft">T 21%, C 6%</h3>
       <h3 class="bottomright">XXX</h3>
</div>
<div class="ar-image">
     <div style="background: url('http://maximumwallhd.com/wp-content/uploads/2015/06/fonds-ecran-plage-palmier-12-660x330.jpg')" class="article-image"></div>
       <p class="descfirst">Progressive</p> 
       <div class="first"><span class = "green" style="width: 85%"></span></div>
       <p class="descsecond">Happy</p> 
       <div class="second"><span class = "green" style="width: 55%"></span></div>
       <p class="descthird">Creative</p> 
       <div class="third"><span class = "green" style="width: 43%"></span></div>
       <p class="descfourth">Slow</p> 
       <div class="fourth"><span class = "red" style="width: 75%"></span></div>
       <p class="descfifth">Boring</p> 
       <div class="fifth"><span class = "red" style="width: 65%"></span></div>
       <p class="descsixth">Text</p> 
       <div class="sixth"><span class = "red" style="width: 60%"></span></div>
       <h1 class="topleft">3 | ABBA</h1>
       <h3 class="topright">Rock</h3>
       <h3 class="bottomleft">T 21%, C 6%</h3>
       <h3 class="bottomright">XXX</h3>
</div>


</div>

    .article-image{
    height: 320px;
    width: 480px;
    -webkit-filter: grayscale(0) blur(0);
    filter: grayscale(0) blur(0);
    transition: .4s ease-in-out;
}

.ar-image:hover .article-image{
    -webkit-filter: grayscale(100%) blur(2px);
    filter: grayscale(100%) blur(2px);
    transition: .1s ease-in-out;
}

.ar-image{
    position: relative;
    display:inline-block;
    padding: 1%;
    width: 25.66%;

}

.ar-image > p{
    display: none;
}


.ar-image:hover > p{
    position: absolute;
    top: 0;
    display: block;
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    z-index: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: .4s ease-in-out;
    line-height:150px;
    margin:0;
}

.ar-image > p.descfirst, p.descsecond, p.descthird, p.descfourth, p.descfifth, p.descsixth{
    display: none;
}

.ar-image:hover > p.descfirst{
    position: absolute;
    top: 40px;
    left: 40px;
    display: block;
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    z-index: 0;
    width: 100%;
    height: 100%;
    text-align: left;
    transition: .4s ease-in-out;
    line-height:25px;
    margin:0;
}

.ar-image:hover > p.descsecond{
    position: absolute;
    top: 80px;
    left: 40px;
    display: block;
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    z-index: 0;
    width: 100%;
    height: 100%;
    text-align: left;
    transition: .4s ease-in-out;
    line-height:25px;
    margin:0;
}

.ar-image:hover > p.descthird{
    position: absolute;
    top: 120px;
    left: 40px;
    display: block;
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    z-index: 0;
    width: 100%;
    height: 100%;
    text-align: left;
    transition: .4s ease-in-out;
    line-height:25px;
    margin:0;
}

.ar-image:hover > p.descfourth{
    position: absolute;
    top: 200px;
    left: 40px;
    display: block;
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    z-index: 0;
    width: 100%;
    height: 100%;
    text-align: left;
    transition: .4s ease-in-out;
    line-height:25px;
    margin:0;
}

.ar-image:hover > p.descfifth{
    position: absolute;
    top: 240px;
    left: 40px;
    display: block;
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    z-index: 0;
    width: 100%;
    height: 100%;
    text-align: left;
    transition: .4s ease-in-out;
    line-height:25px;
    margin:0;
}

.ar-image:hover > p.descsixth{
    position: absolute;
    top: 280px;
    left: 40px;
    display: block;
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    z-index: 0;
    width: 100%;
    height: 100%;
    text-align: left;
    transition: .4s ease-in-out;
    line-height:25px;
    margin:0;
}


.ar-image > div.first, div.second, div.third, div.fourth, div.fifth, div.sixth{
    display: none;
}


.ar-image:hover > div.first{
  position: absolute;
  top: 40px;
  left: 200px;
  display: block;
  height: 25px;  /* Can be anything */
  background-color: rgba(85,85,85,0.4);
  bottom: 20px; 
   right: -40px; 
   width: 45%; 
}

.ar-image:hover > div.second{
  position: absolute;
  top: 80px;
  left: 200px;
  display: block;
  height: 25px;  /* Can be anything */
  position: absolute;
  background-color: rgba(85,85,85,0.4);
  bottom: 20px; 
   right: -40px; 
   width: 45%; 
}

.ar-image:hover > div.third{
  position: absolute;
  top: 120px;
  left: 200px;
  display: block;
  height: 25px;  /* Can be anything */
  position: absolute;
  background-color: rgba(85,85,85,0.4);
  bottom: 20px; 
   right: -40px; 
   width: 45%; 
}

.ar-image:hover > div.fourth{
  position: absolute;
  top: 200px;
  left: 200px;
  display: block;
  height: 25px;  /* Can be anything */
  position: absolute;
  background-color: rgba(85,85,85,0.4);
  bottom: 20px; 
   right: -40px; 
   width: 45%; 
}

.ar-image:hover > div.fifth{
  position: absolute;
  top: 240px;
  left: 200px;
  display: block;
  height: 25px;  /* Can be anything */
  position: absolute;
  background-color: rgba(85,85,85,0.4);
  bottom: 20px; 
   right: -40px; 
   width: 45%; 
}

.ar-image:hover > div.sixth{
  position: absolute;
  top: 280px;
  left: 200px;
  display: block;
  height: 25px;  /* Can be anything */
  position: absolute;
  background-color: rgba(85,85,85,0.4);
  bottom: 20px; 
   right: -40px; 
   width: 45%; 
}



.ar-image > div > span.green{
  display: block;
  height: 100%;

  background-color: rgb(43,194,83);

  position: relative;
  overflow: hidden;
}


.ar-image > div > span.red{
  display: block;
  height: 100%;

  background-color: #ff4742;
  position: relative;
  overflow: hidden;
}







.ar-image > h1.topleft{
    display: visible;
    position: absolute; 
   text-align: left;
   color: #ffffff;
   top: 15px; 
   right: -40px; 
   width: 100%; 
}

.ar-image:hover > h1.topleft{
    display: none;

}

.ar-image > h3.bottomleft{
    display: visible;
    position: absolute; 
   text-align: left;
   color: #ffffff;
   bottom: 20px; 
   right: -40px; 
   width: 100%; 
}

.ar-image:hover > h3.bottomleft{
    display: none;

}


.ar-image > h3.bottomright{
    visibility:visible; 
   position: absolute; 
   text-align: left;
   color: #ffffff;
   bottom: 20px; 
   left: 440px; 
   width: 100%; 
}

.ar-image:hover > h3.bottomright{
    display: none;

}

.ar-image > h3.topright{
    visibility:visible; 
   position: absolute; 
   text-align: left;
   color: #ffffff;
   top: 15px; 
   left: 440px;
   width: 100%; 
}

.ar-image:hover > h3.topright{
    display: none;

}

On hover the image gets blurred and a set of css progress bars is overlaid. I also want each of the divs to have a link but so far was unsuccessful in implementing this without breaking the hover effect.

Any suggestions how a link can be implemented for the whole div (inkl. the and )?

UPDATE When I wrap the whole div in an atag it breajs the hover effekt

Answer 1

Just tried and wrapping ar-image with a tags seems to work. I might not be understanding your question though.