Why is my link not working?

Question

Hi,
I have created a slideshow and am trying to create a link from one of the images on the slideshow to an external website but when I click on it nothing happens.  Can anyone help me to understand why?
The HTML
<div class="containerslide" id="containerslide">
  <!-- caps, non-existent items -->
<span id="slide1" class="cap"></span>
<span id="slide2" class="cap"></span>
<span id="slide3" class="cap"></span>
<span id="slide4" class="cap"></span>
<span id="slide5" class="cap"></span>
<ul class="slider">
<!-- left arrow -->
<li class="lArrow">
<a href="#slide5" class="a5"></a>
<a href="#slide4" class="a4"></a>
<a href="#slide3" class="a3"></a>
<a href="#slide2" class="a2"></a>
<a href="#slide1" class="a1"></a>
</li>
<!-- slides -->
<li class="slides">
<img src="images/welcomeslide5.png" alt="" class="g0" />
<a href="http://theengineerscorset.co.uk/the_engineers_corset/ "target="_blank"><img src="images/portfoliotec.png" width="604" height="453" alt="The Engineers Corset. Web Design by Sommer" class="g1"/></a>
<!--<a href="http://theengineerscorset.co.uk/the_engineers_corset/" target="_blank"><img src="images/tec.png" alt="The Engineers Corset.  Web Design by Sommer" target="_blank" class="g1"></a> -->
<img src="images/sliderad.png" alt="Web Design by Sommer" class="g2" />
<img src="images/sliderad.png" alt="Web Design by Sommer" class="g3" />
<img src="images/sliderad.png" alt="Web Design by Sommer" class="g4" />
<img src= "images/sliderad.png" alt="Web Design by Sommer" class="g5" />
</li>
<!-- right arrow -->
<li class="rArrow">
<a href="#slide5" class="a5"></a>
<a href="#slide4" class="a4"></a>
<a href="#slide3" class="a3"></a>
<a href="#slide2" class="a2"></a>
<a href="#slide1" class="a1"></a>
</li>
<!-- tracker -->
<li class="track">
<a href="#slide1" class="tr1"></a>
<a href="#slide2" class="tr2"></a>
<a href="#slide3" class="tr3"></a>
<a href="#slide4" class="tr4"></a>
<a href="#slide5" class="tr5"></a>
</li>
</ul>
</div>
The CSS
.containerslide {
    overflow: hidden;
    padding: 20px;
    position: absolute;
margin-top: -50px;
margin-left: 285px;
span.cap {
    display:none;
ul.slider {
    margin:0 auto;
    height:455px;
    list-style:none;
    position:relative;
    width:706px;
ul.slider li {
    float:left;
    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    -webkit-transition: 1s;
    transition: 1s;
ul.slider li.slides {
    border:1px solid #999; /*black*/
    height:453px;
    overflow:hidden;
    position:relative;
    width:604px;
    z-index:10;
    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    -webkit-transition: 1s;
    transition: 1s;
ul.slider li.slides img {
    display:block;
    left:50%;
    opacity:0;
    position:absolute;
    top:0;
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    -webkit-transition: 1s;
    transition: 1s;
ul.slider li.slides img.g1,
ul.slider li.slides img.g2,
ul.slider li.slides img.g3,
ul.slider li.slides img.g4,
ul.slider li.slides img.g5 {
    margin-left:-302px;
ul.slider li.lArrow,
ul.slider li.rArrow {
    background-color:#000; /*black*/
    border:2px solid #96C; /*purple*/
    height:451px;
    position:relative;
    width:48px;
    z-index:5;
ul.slider li.lArrow {
    border-radius:100px 0 0 100px;
    border-width:2px 0 2px 2px;
ul.slider li.rArrow {
    border-radius:0 100px 100px 0;
    border-width:2px 2px 2px 0;
ul.slider li.lArrow a,
ul.slider li.rArrow a {
    display:block;
    height:100%;
    left:0;
    position:absolute;
    top:0;
    width:50px;
ul.slider li.lArrow:hover {
    background-color:#C6C; /*purple*/
    left:2px;
ul.slider li.rArrow:hover {
    background-color:#C6C; /*purple*/
    left:-2px;
ul.slider li.track {
    /*background-color:rgba(255,255,255,0.3);*/
background-color:#C9F; /*lightpurple*/
    clear:left;
    height:25px;
    margin-left:51px;
    margin-top:-35px;
    position:relative;
    text-align:center;
    width:604px;
    z-index:20;
ul.slider li.track a {
    background-color:#000; /*purple*/
    display:inline-block;
    height:15px;
    margin:15px;
    width:30px;
margin-top: 5px;
    border-radius:50%;
    -moz-box-shadow:2px 1px 1px #000000; /*black*/
    -ms-box-shadow:2px 1px 1px #000000;
    -webkit-box-shadow:2px 1px 1px #000000);
    -o-box-shadow:2px 1px 1px #000000;
    box-shadow:2px 1px 1px #000000;
ul.slider li.track a:hover {
    background-color:#FFF; /*white*/
span#slide1:target ~ ul.slider li.slides .g1,
span#slide2:target ~ ul.slider li.slides .g2,
span#slide3:target ~ ul.slider li.slides .g3,
span#slide4:target ~ ul.slider li.slides .g4,
span#slide5:target ~ ul.slider li.slides .g5 {
    opacity:1;
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
ul.slider li.slides .g0 {
    margin-left:-302px;
    opacity:1;
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
span#slide1:target ~ ul.slider li.slides .g0,
span#slide2:target ~ ul.slider li.slides .g0,
span#slide3:target ~ ul.slider li.slides .g0,
span#slide4:target ~ ul.slider li.slides .g0,
span#slide5:target ~ ul.slider li.slides .g0 {
    opacity:0;
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0);
span#slide1:target ~ ul.slider li.track .tr1,
span#slide2:target ~ ul.slider li.track .tr2,
span#slide3:target ~ ul.slider li.track .tr3,
span#slide4:target ~ ul.slider li.track .tr4,
span#slide5:target ~ ul.slider li.track .tr5 {
    background-color:#90F; /*purple*/
span#slide1:target ~ ul.slider li.lArrow a,
span#slide1:target ~ ul.slider li.rArrow a {z-index:10}
span#slide1:target ~ ul.slider li.rArrow .a2 {z-index:100}
span#slide1:target ~ ul.slider li.lArrow .a8 {z-index:100}
span#slide2:target ~ ul.slider li.lArrow a,
span#slide2:target ~ ul.slider li.rArrow a {z-index:10}
span#slide2:target ~ ul.slider li.rArrow .a3 {z-index:100}
span#slide2:target ~ ul.slider li.lArrow .a1 {z-index:100}
span#slide3:target ~ ul.slider li.lArrow a,
span#slide3:target ~ ul.slider li.rArrow a {z-index:10}
span#slide3:target ~ ul.slider li.rArrow .a4 {z-index:100}
span#slide3:target ~ ul.slider li.lArrow .a2 {z-index:100}
span#slide4:target ~ ul.slider li.lArrow a,
span#slide4:target ~ ul.slider li.rArrow a {z-index:10}
span#slide4:target ~ ul.slider li.rArrow .a5 {z-index:100}
span#slide4:target ~ ul.slider li.lArrow .a3 {z-index:100}
span#slide5:target ~ ul.slider li.lArrow a,
span#slide5:target ~ ul.slider li.rArrow a {z-index:10}
span#slide5:target ~ ul.slider li.rArrow .a6 {z-index:100}
span#slide5:target ~ ul.slider li.lArrow .a4 {z-index:100}
Thanks

Answer 1

Thanks.  I'm fairly new to coding but really wanted to make a slideshow.  I did wonder that but I couldn't find it.  I wonder if anyone else can.