On the hunt for a pure css slider but need some advice

[RyanReese]

I haven’t kept up with the thread, but is something like this what the OP is after?
http://codepen.io/ryanreese09/pen/xGrBNX

Specific details about what needs to be changed is appreciated . Make a list if you want.

[Nightwing]

Yes I’ve had enough of photo bucket its just been an old habit that needs to change. In the past some forums made in a pain in the ass attaching images so I pledge from this moment on wards to ween my self off photo bucket. Now driving to the office to apply the footer suggestions

[Nightwing]

Thank you Ryan

[Nightwing]

Massively grateful for all the help I’m getting with my footer battles. So i popped back to the office thinking I’d add the code and bam all would be OK. But no after 90 mins I cant get the css to talk / connect to the HTML footer elements I think I’m going quite mad, I’m v tired so am no doubt doing something dumb but I cant spot it even after a gallon of coffee!

Originally Erik_J I patched your code it and it all worked then I must have deleted something and i cant recover it… Arggg!!! I then began to think the css selctors needing fiddling with as the

sites on top of

if that makes any sense, any road nowt is working.

Below is a code pen of where i’m at, so didnt want to re post thought I had this in the bag!

http://codepen.io/Pingbat/pen/xbBQqE

Any insights welcome!

[Erik_J]

Took a quick look, nothing worked at all.

There seems to be a missing end bracket for the:

.hide_desktop {
  display: none;
} <- this is missing

I have to go offline an hour or so, back later.

[Nightwing]

Thanks Erik, very appreciated, will try to fix this Monday and will update

[Nightwing]

Erik_J Thank you so much that curly bracket fixed it

[Erik_J]

@Nightwing

I’m going to run with the idea of just a row of thumbs that pop on click.

The popup on a mouseclick can be done like this, from your CodePen:

/* css footer help from sitepoint */
.footer-thumbs {
    position: relative;
    display: table;
    margin: 0;
    padding: 0;
    width: 100%;
    list-style: none;
}
.footer-thumbs li {
    display: table-cell;
    width: 25%;
    background: rgba(255,255,255,.5);
}
.footer-thumbs img {
    display: block;
    box-sizing: border-box;
    border: 1px solid white;
    width: 100%;
    height: auto;
}
.footer-thumbs a:focus img {
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    margin: 0 auto 30px;
    width: 98%;
    max-width: 900px;
}

<!--Sitepoint help-->
<div id="footer">
    <ul class="footer-thumbs">
        <li><a href="#"><img src="http://i216.photobucket.com/albums/cc53/zymurgy_bucket/footer-image-2_zps1nb0wtue.jpg" alt="" /></a></li>
        <li><a href="#"><img src="http://i216.photobucket.com/albums/cc53/zymurgy_bucket/footer-image-2_zps1nb0wtue.jpg" alt="" /></a></li>
        <li><a href="#"><img src="http://i216.photobucket.com/albums/cc53/zymurgy_bucket/footer-image-2_zps1nb0wtue.jpg" alt="" /></a></li>
        <li><a href="#"><img src="http://i216.photobucket.com/albums/cc53/zymurgy_bucket/footer-image-2_zps1nb0wtue.jpg" alt="" /></a></li>
    </ul>
</div>

While I’m at it; your CodePen page has a horizontal scroll caused by a too wide menu.
Here you can correct it:

line 232
#menu {
  width: 98%;  <-- 100%-2x1% 
  color: #F8F8F8;
  background-color: #CCCCCC;
  padding: 1%;
}

[brad7928]

Have you seen this? CSS only responsive slider - http://csscience.com/responsiveslidercss3/

I have been using it in my projects and even made a dynamic (works out number of images and CSS on the fly) version for use with Jekyll.