Reputation: 59
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;
}
Upvotes: 1
Views: 2833
Reputation: 4689
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 & 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.
Upvotes: 0
Reputation: 8124
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>
Upvotes: 0
Reputation: 3656
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!
Upvotes: 0
Reputation: 2517
<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
}
Upvotes: 0
Reputation: 1908
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;
}
Upvotes: 1
Reputation: 1129
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
Upvotes: 0