сделать ссылку оверлея div на hover

Question

Я пытаюсь сделать мою ссылку наложения div на другую страницу, когда пользователь наводит на div. Я хочу, чтобы весь оверлей был связан, а не только текстовая ссылка, которую я сейчас имею. Может ли кто-нибудь посоветовать, где я ошибся.

Jfiddle прилагается.

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 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> 

и применять следующие CSS в анкера:

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

Answer 2

Оберните DIV внутри якоря

Try:

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

Вы можете разместить столько элементов, в пределах a как хотите.

EDIT:

Глядя через скрипку, ваш код выглядит довольно сложно, и я не буду иметь возможность погружаться во все это.

CSS может повлиять на то, что вы хотите достичь. Например, применение display: block и line-height к вашей ссылке может помочь в достижении вашей цели. Однако, вероятно, вам также понадобится внести другие изменения в CSS окружающих контейнеров.

Удачи!

Answer 3

Вот JSFiddle с ним работает https://jsfiddle.net/Lfz34a8x/

Вы хотите, чтобы обернуть 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> 

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> 

Добавить aditonal гр сс для связи

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

demo

Answer 5

Привет Я не знаю, если вы нашли ответ! Но было бы неплохо, если бы вы могли проверить фрагмент кода, который я ввел здесь в этом ответе!

Я просто изменяли код и исправлен небольшой баг, который был в вашем HTML код, который был:

<a href="#"> 

я удалил эту часть и завернул DIV в ваш необходимый тег!

Надеюсь, это вам поможет!

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; 
 
\t 
 
} 
 
.portfolio-overlay div { 
 
    position:relative; 
 
    display:inline-block;; 
 
\t 
 
} 
 

 
ul.portfolio-project-image { 
 
\t 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; 
 

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

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

 

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

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

 

 

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

 
.bt5 a { 
 
    text-align: center; 
 
\t font: 100 14px/1.3 'Roboto', 'Helvetica Neue', 'Segoe UI Light', sans-serif; 
 
\t font-size: 16px; 
 
\t font-weight: 200; 
 
\t color:#FFF; 
 
\t width:100%; 
 
    height:10px; 
 
\t margin-left:auto; 
 
\t margin-right:auto; 
 
\t margin-top: 10px; 
 
\t 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

Я стараюсь сократить весь код до минимума только центра в задаче, но достаточно, чтобы HTML сделал его доступным.

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%; 
} 

В основном ссылку охватывают все элементы и внутренняя оболочка имеет переход, я рекомендую вам также использовать flex to center вертикальный контент, здесь я использую прямой ly padding-top.