The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

css caption slider in IE9 issues

  • # October 23, 2012 at 10:58 pm

    Hi I’m attempting to achieve a hover overlay effect, listing objects elements using a basic div ul li a img, and I simply want a black overlay with some white text caption to slide in, when hovering over a specific image.

    So far I’ve got the JQuery and CSS caption sliders functionality to behave correctly in modern browsers and even IE8 along with previous versions, but I can’t seem to get the caption integrated to function correctly for IE9. The text caption overlay partially shows (as intended), but does not slide up on a hover event.

    Heres a JSFiddle example of how it works correctly in the modern browsers:

    Can Anybody please shed some light on on any tricks i’m missing?

    Here is the CSS i’m applying:

    .featurebox h3{
    font-weight: bold;

    width: 185px;
    height: 118px;
    /*border: solid 2px #8399AF;*/
    overflow: hidden;
    position: relative;

    /*caption para text*/
    .featurebox p{
    padding-left: 5px;

    /*caption slider */
    float: left;
    position: absolute;
    background: #000;
    height: 100px;
    width: 100%;
    opacity: .8;
    /* For IE 5-7 */
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
    /* For IE 8 */
    -MS-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=80)”;

    .holder .featuretext {
    top: 220;
    left: 0;

    .featurebox p a {
    float: right;

    Any help would be much appreciated. Thanks

    # October 24, 2012 at 7:47 am

    I’m not sure I understood the problem but I got it to behave the same way on chrome and IE9 by declaring a font size in .featurebox p

    .featurebox p{
    padding-left: 5px;

    here’s the fiddle:

    This kind of problems is why I usually import a reset.css ( )
    Hope this helps.

    # October 24, 2012 at 7:54 am

    I’m getting something strange with IE9. I can view the demo page here on this site and the Slider works fine, but when I download the app and put the demo page up on my site the slider doesn’t work in IE9, I just see the first image and nothing follows that.
    [Website App Developers]( “Website App Developers”)
    [Social Media Application Development]( “Social Media Application Development”)

    # April 17, 2013 at 11:42 am

    Hey Joni thanks! you’re right with the idea of declaring a font size in .featurebox p, I’ve tried it and it works!

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed