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>

Dani AI

Generated

— the reason your image clicks don't show the matching text is that each anchor is targeting a single element. CSS :target only matches the element whose id equals the fragment, so your image and caption end up controlled separately. The simplest, most robust fix is to make each slide a single element that contains both the image and its text, then target that parent. That keeps image+text in sync and fits the single-viewport/container idea described.

A minimal pattern (HTML + CSS) to illustrate the idea:

<!-- HTML -->
<div id="viewport">
  <section id="slide-1" class="slide">
    <img src="pics/Pic1.jpg" alt="short description">
    <div class="caption">Slide 1 descriptive text</div>
  </section>

  <section id="slide-2" class="slide">
    <img src="pics/Pic2.jpg" alt="short description">
    <div class="caption">Slide 2 descriptive text</div>
  </section>
</div>

<nav id="pager">
  <a href="#slide-1">1</a>
  <a href="#slide-2">2</a>
</nav>

<!-- CSS -->
#viewport { position:relative; width:100%; max-width:350px; height:350px; overflow:hidden; }
.slide { position:absolute; inset:0; opacity:0; transition:opacity .5s ease; pointer-events:none; }
.slide:target { opacity:1; z-index:2; pointer-events:auto; }
.slide img { width:100%; height:100%; object-fit:cover; }
.caption { position:absolute; left:0; right:0; bottom:0; padding:8px; background:rgba(0,0,0,.45); color:#fff; }

If you prefer not to change the URL fragment, use hidden radio inputs + :checked or a small script that toggles an active class on the parent slide — both let you sync image and text and handle auto-play or keyboard controls more easily.

Troubleshooting: never duplicate IDs (invalid and unreliable), ensure pager href matches the slide id, check z-index/pointer-events if clicks fail, add meaningful alt text, and use max-width/object-fit for responsiveness.

Of course you are encouraged to create such a slideshow yourself, because it's a nice opportunity and a very good way to practice your programming. However, there are thousands of slideshow plugins out there, and if there is no real need or desire to create one yourself, why don't you pick one of those and use that? :)

The basics of a slider:

One viewport div with overflow: none.
One container div.
A lot of slide divs that may contain other divs with images, text, etc.

The slides go into the container div. They should be lined up horizontally, creating one large slide. When the user presses a button, you slide this gigantic slide (the container div) to the left or right, so that a different part of it comes into view in the viewport div.

Hope that's of any help!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.