make a div overlay link on hover

Question

I have been trying to make my div overlay link to another page when the user hovers on the div. I want the whole overlay to link and not just the text link that i currently have. Can anyone advise where i have gone wrong.

Jfiddle attached.

https://jsfiddle.net/ahh6Lars/

    <div class="portfolio-project-container">
<div class="portfolio-project">
<div class="portfolio-project-image">
<ul class="portfolio-project-image">
    <li>
        <div class="portfolio-project-image-one"></div>
        <div class="portfolio-overlay"><a href="#"></a><div class="bt4">Marks & Spencer</div><div class="bt5"><a href="images/flyer_mock_up.jpg" class="html5lightbox" data-width="853" data-height="480" title="">Summer Fete A5 Flyers</a></div><div class="bt6"></div></div>
    </li>
</ul>
</div>
</div>
</div>

CSS

.portfolio-overlay {
  width:100%;
  height:100%;
  opacity: 0.75;
  position:absolute;
  background-color:black;
  top:-100%;
  transition: top 0.3s ease-in-out;
  display:block;

}
.portfolio-overlay div {
    position:relative;
  display:inline-block;;

}

ul.portfolio-project-image { 
    list-style: none; 
    width:100% 

}

ul.portfolio-project-image li {
    position: relative;
    display: inline-block;
    width:100%;
  height: 100%;
  overflow: hidden;
}

li:hover .portfolio-overlay {
  top: 0;
  display:block;


}
.bt4 {
    text-align: center;
    margin-top: 160px;
    font: 200 12px/1.3 'Roboto', 'Helvetica Neue', 'Segoe UI Light', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color:#FFF;
    width:100%;
    height:10px;
    margin-left:auto;
    margin-right:auto;
}
.bt5 {
    text-align: center;
    font: 100 14px/1.3 'Roboto', 'Helvetica Neue', 'Segoe UI Light', sans-serif;
    font-size: 16px;
    font-weight: 200;
    color:#FFF;
    width:100%;
    height:10px;
    margin-left:auto;
    margin-right:auto;
    margin-top: 10px;
}

.portfolio-project {
    width: 32%;
    height: 373px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    margin-left:15px;
    float:left;
}


.portfolio-project-image{
    width: 100%;
    height: 373px;
}

.portfolio-project-image-one{
    width: 100%;
    height: 373px;
    background-image:url(../images/flyer_mock_up.jpg);
    background-position:center;
}



.portfolio-project-image-one:hover{
    width: 100%;
    height: 373px;
    background-image:url(../images/flyer_mock_up.jpg);
    background-position:center;
    display:block;
}

.bt5 a {
    text-align: center;
    font: 100 14px/1.3 'Roboto', 'Helvetica Neue', 'Segoe UI Light', sans-serif;
    font-size: 16px;
    font-weight: 200;
    color:#FFF;
    width:100%;
    height:10px;
    margin-left:auto;
    margin-right:auto;
    margin-top: 10px;
    text-decoration:none;
}

Answer 1

Wrap portfolio-project div by the anchor:

<div class="portfolio-project">
  <a href="images/flyer_mock_up.jpg" class="html5lightbox" data-width="853" data-height="480" title="">
  <div class="portfolio-project-image">
    <ul class="portfolio-project-image">
      <li>
        <div class="portfolio-project-image-one"></div>
        <div class="portfolio-overlay"><div class="bt4">Marks & Spencer</div><div class="bt5">Summer Fete A5 Flyers</div><div class="bt6"></div></div>
     </li>
  </ul>
 </div>
</a>
</div>

and apply following css in the anchor:

a.html5lightbox {
 height: 100%;
 width: 100%;
 display: block;
}

Answer 2

Wrap the DIV within the anchor

Try:

<a href="Yourhref.html">
    <div class="overlay-or-whatever">Div content here</div>
</a>

You can then place as many elements within the a as you please.

EDIT:

Looking through your fiddle, your code looks rather complex and I won't be able to dive into it all.

The CSS can have an impact on what you wish to achieve. For instance, applying display: block and line-height to your link can help achieve your goal. However, your likely going to need to also make other changes to the CSS of the surrounding containers.

Best of luck!

Answer 3

Here is a JSFiddle with it working https://jsfiddle.net/Lfz34a8x/

You want to wrap your div in your "a" tag (And remove the other "a" tag). Example:

<a href="images/flyer_mock_up.jpg" class="html5lightbox" data-width="853" data-height="480" title="">
    <div class="portfolio-overlay">
        <div class="bt4">Marks & Spencer</div>
        <div class="bt5">Summer Fete A5 Flyers</div>
        <div class="bt6"></div>
    </div>
</a>

Read more on nesting elements in anchor tags

Answer 4

<div class="portfolio-project-container">
<div class="portfolio-project">
<div class="portfolio-project-image">
<ul class="portfolio-project-image">
    <li>
        <div class="portfolio-project-image-one"></div>
        <div class="portfolio-overlay"><a class="demoLink" href="#"></a><div class="bt4">Marks & Spencer</div><div class="bt5"><a href="images/flyer_mock_up.jpg" class="html5lightbox" data-width="853" data-height="480" title="">Summer Fete A5 Flyers</a></div><div class="bt6"></div></div>
    </li>
</ul>
</div>
</div>
</div>

Add aditonal css for link

.portfolio-overlay a.demoLink{
    width:100%;
    height:100%;
    position:absolute
}

demo

Answer 5

Hi I don't know if you have had found the answer! But it would be nice if you could check the code snippet I've entered here within this answer!

I just edited your code and fixed a slight bug which was in your HTML Code which was:

<a href="#">

I removed that part and wrapped the div within your required tag!

Hope this helps you!

Cheers!

 .portfolio-overlay { width:100%; height:100%; opacity: 0.75; position:absolute; background-color:black; top:-100%; transition: top 0.3s ease-in-out; display:block; } .portfolio-overlay div { position:relative; display:inline-block;; } ul.portfolio-project-image { list-style: none; width:100% } ul.portfolio-project-image li { position: relative; display: inline-block; width:100%; height: 100%; overflow: hidden; } li:hover .portfolio-overlay { top: 0; display:block; } .bt4 { text-align: center; margin-top: 160px; font: 200 12px/1.3 'Roboto', 'Helvetica Neue', 'Segoe UI Light', sans-serif; font-size: 14px; font-weight: 500; color:#FFF; width:100%; height:10px; margin-left:auto; margin-right:auto; } .bt5 { text-align: center; font: 100 14px/1.3 'Roboto', 'Helvetica Neue', 'Segoe UI Light', sans-serif; font-size: 16px; font-weight: 200; color:#FFF; width:100%; height:10px; margin-left:auto; margin-right:auto; margin-top: 10px; } .portfolio-project { width: 32%; height: 373px; box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); margin-left:15px; float:left; } .portfolio-project-image{ width: 100%; height: 373px; } .portfolio-project-image-one{ width: 100%; height: 373px; background-image:url(../images/flyer_mock_up.jpg); background-position:center; } .portfolio-project-image-one:hover{ width: 100%; height: 373px; background-image:url(../images/flyer_mock_up.jpg); background-position:center; display:block; } .bt5 a { text-align: center; font: 100 14px/1.3 'Roboto', 'Helvetica Neue', 'Segoe UI Light', sans-serif; font-size: 16px; font-weight: 200; color:#FFF; width:100%; height:10px; margin-left:auto; margin-right:auto; margin-top: 10px; text-decoration:none; } 

 <div class="portfolio-project-container"> <div class="portfolio-project"> <div class="portfolio-project-image"> <ul class="portfolio-project-image"> <li> <div class="portfolio-project-image-one"></div> <a href="images/flyer_mock_up.jpg" class="html5lightbox" data-width="853" data-height="480" title=""> <div class="portfolio-overlay"><div class="bt4">Marks & Spencer</div><div class="bt5">Summer Fete A5 Flyers</div><div class="bt6"></div></div> </a> </li> </ul> </div> </div> </div> 

Answer 6

I try to reduce all code to the minimum only center in the problem, but the enough html to made it comprehensible.

https://jsfiddle.net/luarmr/ahh6Lars/4/

HTML

<ul class="portfolio-project-image">
    <li><a href="images/flyer_mock_up.jpg">
        <span>
        Marks &amp; Spencer 
        <span>Summer Fete A5 Flyers</span>
         </span>
        </a>
    </li>
</ul>

CSS

body{
    font: 200 14px/1.3 'Roboto', 'Helvetica Neue', 'Segoe UI Light', sans-serif;
}

ul.portfolio-project-image{
    margin:10px;
    padding:0;
    text-decoration:none;
    list-style-type:none;

}

ul.portfolio-project-image li a,
ul.portfolio-project-image li a>span{
    display:block;
    width:200px;
    height:300px;
    text-align:center;
    background:#fabada;
    position:relative;
    box-sizing:border-box;
    overflow:hidden;

}

ul.portfolio-project-image li span{
    display:block;
}

ul.portfolio-project-image li a>span{
    padding-top:80px;
    background:#fe0;
    position:absolute;
    top:-100%;
    -webkit-transition: top 0.3s ease-in-out;
            transition: top 0.3s ease-in-out;
}

ul.portfolio-project-image li a:hover>span{
    top:0%;
}

Basically the link cover all elements, and internal span have the transition, I recommend to you as well use flex to center vertical the content, here I use directly padding-top.