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

score 1 · Accepted Answer · answered Jun 21 '17 at 19:50

1

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

answered Jun 21 '17 at 19:50

Matt

1,518
4
16
30

When I wrap the div in an a tag it breaks the hover effect. Basically I want the image to link to another page but also the div/span that is overlayed over the image. Probably I will need to overlay something over that with a link. See my updated questin with the image how the a tag breaks the site – Jan Jun 21 '17 at 20:43
You could try looking into the after pseudo elements which is a common way to do image overlays. see here: https://stackoverflow.com/questions/22420162/image-overlay-using-after-pseudo-element#22420195 – Matt Jun 21 '17 at 20:50
Thanks for the suggestion. That overlays an image on hover but it is still behind the other div/span and it is not possible to set a custom link for this, right? Any other suggestions. I tried wrapping every element div, span in an atag but this does not turn the progressbar-span into a link and is really messy...any other ideas? – Jan Jun 21 '17 at 21:01
Have you tried using z-index to bring one above the other? remember to set the position to something when using z-index – Matt Jun 21 '17 at 21:04
Mh, because of the :after effect the z-index position is tied to the background image. If I hide the div/span overlay behind the transparent image it is also behind the background image and thus disappears. Sorry for the beginner questions but I am just starting out. Thank you for your help – Jan Jun 21 '17 at 21:18
Another way I tried was to great a totaly separate div that would be displayed when hovered but I had not luck so far. Do you have any other suggestions? Appreciate your help! – Jan Jun 22 '17 at 06:48
Still not 100% sure what you're going for, got any examples? – Matt Jun 22 '17 at 11:32
Please see this [link](http://netpromotive.com/sample/index.html) for the actual sample. I just want a link of the whole image as well as the overlaying progress bar to an internal page. I hope that makes it clearer? – Jan Jun 22 '17 at 18:52
Any idea would be appreciated – Jan Jun 23 '17 at 10:52
Just tested and the effect works on Firefox but not IE11 with anchor tags. What browser are you using? – Matt Jun 23 '17 at 11:47
I use chrome...do you wrap the whole div or use pseudo elements? – Jan Jun 23 '17 at 14:11
I did this: `

` Couldn't post the whole snippet – Matt Jun 23 '17 at 14:21
OK, no idea why but I gort it working in ff and then also in chrome. Thank you – Jan Jun 23 '17 at 21:11

Link over div with background image and hover effect

1 Answers1