1

When you move the mouse over image thumbnails, i.e. all images in ul .thumbs, you should see a small box which shows the text in the span embedded in the image link. This does not happen. Why and how do I fix it ?

http://jsfiddle.net/raj4dev/hbyg43d9/3/

html

<body>
    <div id="container">
        <h1>css slide show</h1>
        <ul class="thumbs">
            <li><a href="#slide-1"><img src="img/thumb1.jpg"><span>Img 1</span></a></li>
            <li><a href="#slide-2"><img src="img/thumb2.jpg"><span>Img 2</span></a></li>
            <li><a href="#slide-3"><img src="img/thumb3.jpg"><span>Img 3</span></a></li>
        </ul>

        <ul class="slides">
            <li class="first" id="slide-1"><img src="img/slide1.jpg"></li>
            <li id="slide-2"><img src="img/slide2.jpg"></li>
            <li id="slide-3"><img src="img/slide3.jpg"></li>
        </ul>

    </div>
</body>

css

*{
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    list-style: none;
}

body{
    background: #465c8f url(../img/bg-image.jpg) repeat-x;
    font-family: 'Arial', 'sans-serif';
}

#container{
    width: 718px;
    overflow: hidden;
    margin: 40px auto;
}

h1{
    color: #fff;
    text-align: center;
    margin-bottom: 20px;
}

ul.thumbs li{
    float: left;
    margin-bottom: 10px;
    margin-right: 9px;
}

ul.thumbs a{
    display: block;
    position: relative;
    width: 85px;
    height: 55px;
    border: 4px solid transparent;
    font: bold 12px/25px Arial, sans-serif;
    color: #515151;
    text-decoration: none;/*remove underlines*/
    text-shadow: 1px 1px 0px rgba(255,255,255,0.25), inset 1px 1px 0px rgba(0,0,0,0.15);
}

ul.thumbs img{
    border: #333 solid 4px;
}

ul.slide{
    overflow: hidden;
    clear: both;
    border: #333 solid 4px;
}

ul.slides, ul.slides li, ul.slides a, ul.slides img{
    width: 705;
    height: 350px;
    position: relative;
}

ul.thumbs li a:hover span{
    position: absolute;
    z-index: 101;
    bottom: -30px;
    left: -22px;
    display: block;
    width: 100px;
    height: 25px;
    text-align: center;
    border-radius: 3px;
}
HelloWorldNoMore
  • 307
  • 3
  • 14

3 Answers3

1

This is a clever approach to creating a slide show that does not require JavaScript or jQuery, rather nicely done.

There was a typo in one of your class names in the CSS and that was creating some confusion (change ul.slide to ul.slides).

I guessed that what you wanted to do was display the span on hover, which means that to begin with, the span need to be hidden using display: none, and I added a new CSS rule for ul.thumbs li a span to correspond with ul.thumbs li a:hover span. (Note, you could also use :hover on li instead and get a similar effect.)

I also altered how the floated elements are styled. If you add overflow: auto to ul.thumbs, all the floats are contained within the parent block and you can then add the bottom margin to the parent ul instead of the li, which is more advantageous in some designs, your can decide.

For the thumbnail images, see ul.thumbs img, I set the height to 100% and let the thumbnails scale to fit the inherited height (from li) and use vertical-align: top if you want to remove the whitespace below the images.

I also set the with on the li instead of the a, but the distinction really depends on the details of our design.

For the most part, your CSS is good as is. The only missing concept was the initial hiding of the span so that it can appear on hover.

Note: I did not pay much attention to the width of the span and its exact positioning. If you have a lot of text (like a caption), the width of 100% will not be enough (I set it that way to make it fit in the li container). You can change it as you see fit.

*{
 margin: 0;
 padding: 0;
 border: none;
 outline: none;
 list-style: none;
}

body {
 background: #465c8f url(../img/bg-image.jpg) repeat-x;
 font-family: 'Arial', 'sans-serif';
}

#container{
 width: 718px;
 overflow: hidden;
 margin: 40px auto;
}

h1{
 color: #fff;
 text-align: center;
 margin-bottom: 20px;
}

ul.thumbs {
    border: 1px dotted white; /* for demo only... */
    overflow: auto;
 margin-bottom: 10px;
}

ul.thumbs li{
 float: left;
 width: 85px;
 height: auto;
    margin-right: 9px;
    border: 1px dotted white; /* for demo only... */
}

ul.thumbs a {
 display: block;
 position: relative;
 border: 4px solid transparent;
 font: bold 12px/25px Arial, sans-serif;
 color: #515151;
 text-decoration: none;/*remove underlines*/
 text-shadow: 1px 1px 0px rgba(255,255,255,0.25), inset 1px 1px 0px rgba(0,0,0,0.15);
}

ul.thumbs img{
    vertical-align: top; /* if you need to remove whitespace below image */
    height: 100%;
 border: #333 solid 4px;
}

ul.slides {  /* fix typo in class name */
 overflow: hidden;
 clear: both;
 border: #333 solid 4px;
}

ul.slides, ul.slides li, ul.slides a, ul.slides img{
 width: 705;
 height: 350px;
 position: relative;
}

ul.thumbs li a span { /* Need to provide a default styling for the span... */
 position: absolute;
 bottom: 0px;
 left: 0px;
 display: block;
 width: 100%;
 height: auto;
 text-align: center;
 border-radius: 3px;
    background-color: white;
    display: none;
}

ul.thumbs li a:hover span {
    display: block;
}
<div id="container">
  <h1>css slide show</h1>
  
  <ul class="thumbs">
    <li><a href="#slide-1"><img src="http://placehold.it/60x60"><span>Img 1</span></a></li>
    <li><a href="#slide-2"><img src="http://placehold.it/60x60"><span>Img 2</span></a></li>
    <li><a href="#slide-3"><img src="http://placehold.it/60x60"><span>Img 3</span></a></li>
  </ul>

  <ul class="slides">
    <li class="first" id="slide-1"><img src="http://placehold.it/240x120"></li>
    <li id="slide-2"><img src="http://placehold.it/180x120"></li>
    <li id="slide-3"><img src="http://placehold.it/120x120"></li>
  </ul>
</div>
Marc Audet
  • 46,011
  • 11
  • 63
  • 83
  • Thanks Marc. Just fixing the typo of ul.slide to ul.slides solved the problem. Can you please explain why it started working ? – HelloWorldNoMore Dec 11 '15 at 19:01
  • 1
    I am guessing that once you fixed the typo in the class name, the `span` elements were hidden from view by the `.slides` block. When you hover over the `a` blocks, the absolute positioning changed the stacking order of the `span`'s and they became visible, but not for the reason you were expecting. That is why I added the `display: none` to the non-hover state of the `span`'s. – Marc Audet Dec 11 '15 at 19:39
0

Your hover styles work fine, but you have ul.slides on top of ul.thumbs, so the :hover action isn't being passed to your anchor.

In the future, please share the relevant pieces of code in your question on StackOverflow for posterity and searchability.

coreyward
  • 77,547
  • 20
  • 137
  • 166
  • sorry...i did not understand the meaning of "hover action not being passed to the anchor." please explain. – HelloWorldNoMore Dec 11 '15 at 01:57
  • @HelloWorldNoMore Wire up some rudimentary jquery from the sample `hover` documentation and you might get a better understanding of how browsers implement hover actions. Suffice to say that you need to fix your CSS so `.slides` isn't on top of `.thumbs` and you're golden. – coreyward Dec 11 '15 at 01:59
  • thanks. I will read the hover docs now. However, if possible, can you please suggest a tutorial which could help me to understand my problem ? – HelloWorldNoMore Dec 11 '15 at 02:04
  • 1
    @HelloWorldNoMore To be honest, you're better off reading documentation, articles, and books. You won't gain an understanding from tutorials that skim the surface or hide complexity. – coreyward Dec 11 '15 at 02:05
  • I read the documentation in two places and I am still not able to figure it out. https://api.jquery.com/hover/ and https://api.jquery.com/mouseenter/. Please suggest what I need to look for and where. Thanks. – HelloWorldNoMore Dec 11 '15 at 06:14
0

Just add z-index: 2; to your ul.thumbs a css like coryward said your link is underneath something so you can't hover over it you need to bring it to the top so you can hover on it.

Steve K
  • 8,505
  • 2
  • 20
  • 35