Уважаемые тостеры, прошу Вашей помощи. Как добавить в код гиперссылку, что бы был переход на другую страничку?
Имеется HTML код:
<div class="slimThumbs">
<div class="square red" data-hover="Feu">
<a href="3" title="Feu">
<div class="thumb" src="#" alt="Feu"> </div>
</a>
</div>
<div class="square blue" data-hover="Ocean">
<a href="3" title="Ocean">
<div class="thumb" src="#" alt="Ocean"></div>
</a>
</div>
<div class="square black" data-hover="Nuit">
<a href="3" title="Nuit">
<div class="thumb" src="#" alt="Nuit"></div>
</a>
</div>
<div class="square green" data-hover="Pelouse">
<a href="3" title="Pelouse" >
<div class="thumb" src="#" alt="Pelouse"></div>
</a>
</div>
<div class="square grey" data-hover="Pluie">
<a href="3" title="Pluie">
<div class="thumb" src="#" alt="Pluie"></div>
</a>
</div>
<div class="square pink" data-hover="Fleurs de printemps">
<a href="3" title="Fleurs de printemps">
<div class="thumb" src="#" alt="Fleurs de printemps"></div>
</a>
</div>
</div>
CSS:
.red {background-color: red;}
.blue {background-color: blue;}
.black {background-color: black;}
.green {background-color: green;}
.grey {background-color: grey;}
.pink {background-color: pink;}
.slimThumbs {width:390px; height:390px;}
div.square, .thumb {width:130px; height:130px; float:left; overflow:hidden;}
div.square:before{
content:attr(data-hover);
background: rgba(0,0,0, 0.5);
color: white;
display: block;
top: -1200em;
position: relative;
z-index: 10;
opacity: 0;
transition:opacity 0.4s ease-out;
cursor:pointer;
}
.square:hover:before {
opacity:1;
line-height: 20px;
opacity:1;
top:0;
left:0;
width:90px;
height:40px;
padding:45px 20px;
}
