So what i am trying to do here is to create a slide show which will show both image and text box with one click and i cannot seem to get it right so anyone here can help me?
CSS:
#divs
color:black;
width: 350px;
height: 350px;
overflow: hidden;
position: relative;
margin: 0px auto; }
#divs div{
width: 330px;
height: 330px;
position: absolute;
top:0; }
#divs div{
z-index: 1;
opacity: 0;
transition:all linear 1s;
-moz-transition:all linear 1s;
-webkit-transition:all linear 1s;
}
#divs div:target {
opacity:1;}
#images {
width: 350px;
height: 350px;
overflow: hidden;
position: relative;
margin: 0px auto; }
#images img {
width: 330px;
height: 330px;
position: absolute;
top:0; }
#slider a{
text-decoration: none;
background: #E3F1FA;
border: 1px solid #C6E5F2;
padding: 6px 12px;
color: #222;
}
#slider a:hover{
background: #C6E4F2;
}
#images img{
z-index: 1;
opacity: 0;
transition:all linear 1s;
-moz-transition:all linear 1s;
-webkit-transition:all linear 1s;
}
#images img.tab{
z-index: 1;
opacity: 1;
transition:all linear 1s;
-moz-transition:all linear 1s;
-webkit-transition:all linear 1s;
}
#images img:target {
opacity:1;}
HTML:
<div id="images">
<img id="image1" src="pics/Pic1.jpg" class="tab">
<img id="image2" src="pics/Pic2.jpg" >
<img id="image3" src="pics/Pic3.jpg" >
<img id="image4" src="pics/Pic4.jpg" >
<img id="image5" src="pics/Pic5.jpg" >
<img id="image6" src="pics/Pic6.jpg" >
</div>
<div id="divs">
<div id="div1"> The sequel to the puzzle hit of 2002 is back and masterfully delivers the next dimension of its classic 3D matching game. 3 new game cubes, featuring the Bomb, Dual and Ghost Cube, bring exciting twists to every aspect of this addictive puzzle game<br>
There's never a dull moment as Ghost Cubes randomly teleport in the new Morph-Fun modes. Use the Bomb Cube to blast cubes and rearrange level layouts.<br>
</div>
<div id="div2">After your ship washes up on the shore of a seemingly deserted island, it quickly becomes clear that the island is not only inhabited, but that it is also home to a powerful volcano. Your presence has awoken and angered the volcano and put the entire island in jeopardy <br>
Fortunately, the islanders are masters at the great game of SKIP-BO™ and are willing to teach you their favorite game. Only you can play SKIP-BO™ with the friendly inhabitants of the island, calm the active volcano, and restore the quiet peace of this tropical paradise.
</div></div>
<div id="slider">
<p>
<a href="#image1">1</a>
<a href="#image2">2</a>
<a href="#image3">3</a>
<a href="#image4">4</a>
<a href="#image5">5</a>
<a href="#image6">6</a>
</p>
</div>
<div id="slider">
<p>
<a href="#div1">1</a>
<a href="#div2">2</a>
<a href="#image3">3</a>
<a href="#image4">4</a>
<a href="#image5">5</a>
<a href="#image6">6</a>
</p>
</div>