I want to display my text after my thumbnail slider div

Question

I want to display my text after my thumbnail slider div something like this, my active slider class: "itm0 selected" my thumbnail id: "thumbs" i want to display text below my #thumbs div automatically when it is active i tried this CSS, but not worked,

.itm0 .selected{
    #thumbs::after{
         content:"first active image";
    }
}

.itm2 .selected{            
    #thumbs::after{
         content:"second active image";
    }
}

html:

<div id="thumbs">
  <img class="itm0 selected"></img>
  <img class="itm1"></img>
</div> 

when 2nd img active in slider

<div id="thumbs">
   <img class="itm0"></img>
   <img class="itm1 selected"></img>
</div>

etc.

anyone have some solution? or how can I do it in javascript? I am new newbie.. give some idea friends

Answer 1

If you're open to using jQuery, you can do the following.

Fiddle: https://jsfiddle.net/79fryyz1/

HTML

I've added an additional div under the #thumbs div. I've given it a class called caption. This will be used to show the text under the div. Then, I've added a data attribute called data-caption to store the text to be displayed after each image. I've also added a toggle button for demonstration purposes.

<div id="thumbs">
    <img class="itm0 selected" src="http://bit.ly/1S6znnc" data-caption="first active image"/>
    <img class="itm1" src="http://bit.ly/1MKyvBI" data-caption="second active image"/>
</div>
<div class="caption">first active image</div>
<a href="#" class="toggleBtn">Toggle</a>

JS

When the image slider is changed, and a new image is selected, you can pick up the caption from the data attribute and display it under the #thumbs div.

$('.toggleBtn').click(function() {
    $('img').toggleClass('selected');

    var caption = $('img.selected').data('caption');
    $('.caption').html(caption);
});

Answer 2

That's a strange way of doing it, but here's how it could work...

.thumbs { 
  width:100px;
  height:100px;
  float:left;
  margin:10px;
  background:green;
}

.thumbs:after {
  content: ' ';
  position:absolute;
  background:#000;
  color:#fff;
  border-radius:5px;margin:100px 0 0;
}

.thumbs:nth-child(1):hover:after {
   content:"first thumb";
}

.thumbs:nth-child(2):hover:after {
   content:"second thumb";
}

<div class="thumbs"></div>
<div class="thumbs"></div>