CODEWITHSUNDEEP
htmlcssinternet-explorer
Michael Davis
Michael Davis

Reputation: 267

Images with CSS Transition not showing in IE

I am trying to use a transition effect on three images near the upper-middle of this page: http://stewartllc.imnotmarvin.com/

The images show and the transition works as intended in Chrome and FireFox, but not in IE (tested 11.x and 10.x)

In IE, the image does not show at all. I've run the html and the css through W3C validators and, while not perfect yet, none of the errors or warnings resolve this issue.

Even more puzzling to me... I created a simple CodePen here: http://codepen.io/anon/pen/BhGze and this DOES work in IE. (FYI - While the CodePen currently only includes relevant html/css, I also tested with the full page and full css content)

I am stumped and would greatly appreciate any suggestions to help me debug and fix this.

Related Code: 

        <div id="ez-home-top-1" class="widget-area ez-widget-area one-third first">
            <section id="text-3" class="widget widget_text"><div class="widget-wrap">
        <div class="textwidget"><div class="imgWrap shrink shrink1"><img src="http://stewartllc.imnotmarvin.com/wp-content/uploads/dynamik-gen/theme/images/success-or-nothing-full.jpg" alt="Develop A Success or Nothing Mindset"></div></div>
    </div></section>
        </div><!-- end #ez-home-top-1 -->   
    </div>

    .imgWrap {
    border: 5px solid #fff;
    -webkit-box-shadow: 0 2px 7px rgba(50,50,50,0.6);
    -moz-box-shadow: 0 2px 7px rgba(50,50,50,0.6);
    box-shadow: 0 2px 7px rgba(50,50,50,0.6);
    width: 279px;
    overflow: hidden;
    margin: 0 auto;
}

#ez-home-top-container .imgWrap {
    height: 196px;
}

.page-id-8 .imgWrap {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

/*SHRINK*/
.shrink img {
    max-width: initial !important;
    /*-webkit-transition: all 2s ease-out;
       -moz-transition: all 2s ease-out;
         -o-transition: all 2s ease-out;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;*/
            transition: all 2s ease-out;
            box-sizing: border-box;
}

.shrink1 img {
    width: 990px;
    margin-left: -575px;
    margin-top: -242px;
}



.shrink img:hover {
    width: 279px;
    margin-left: 0;
    margin-top: 0;
}

.imgWrap img {
    display: block;
}

Upvotes: 0

Views: 65

Answers (2)

Michael Davis
Michael Davis

Reputation: 267

The previous answer was close and gave me the necessary clues, but in the end I got it working by changing the max-width for the images to none, like this:

.shrink img {
    max-width: none !important;
    -webkit-transition: all 2s ease-out;
       -moz-transition: all 2s ease-out;
         -o-transition: all 2s ease-out;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            transition: all 2s ease-out;
            box-sizing: border-box;
}

Elsewhere, max-width had been set to 100% for all img tags. This combined with the margin-left and margin-top settings having negative values was preventing the image from being seen because the container overflow is hidden for this effect.

Upvotes: 0

DividedByZero
DividedByZero

Reputation: 4391

The margin-top and margin-left properties under .shrink1 img, .shrink2 img and so on are causing the trouble.

Use zoom instead of increasing width:

div{zoom:1; width:50px; height:50px;background:red; transition:zoom 2s;}
div:hover{zoom:5}
<div></div>

Here's your CodePen fixed for IE (yes I know your one worked too but this will also work on your website)

Upvotes: 1

Related Questions