Image flickering in Internet Explorer with transition and scale <p>For displaying the team members of a platform. I want to show and hide the social media icons when you hover over the image of the team member. I'm using the CSS properties transition and scale to accomplish this.</p> <p>Here you can see my code: <a href="https://jsfiddle.net/johna/L9hbtqce" rel="nofollow">https://jsfiddle.net/johna/L9hbtqce</a> . (I also use Bootstrap as CSS Framework and Font Awesome for the icons.)</p> <p>HTML</p> <pre><code>&lt;div class="team-member text-center"&gt; &lt;div class="picture"&gt; &lt;img src="http://s22.postimg.org/hxl9mdjqp/member.png" class="img-responsive" alt="Ward"/&gt; &lt;div class="mask"&gt; &lt;div class="team-member-icons"&gt; &lt;a target="_blank" href="#"&gt; &lt;i class="fa fa-facebook"&gt;&lt;/i&gt; &lt;/a&gt; &lt;a target="_blank" href="#"&gt; &lt;i class="fa fa-twitter"&gt;&lt;/i&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p></p> <p>CSS</p> <pre><code>.team-member .picture { background-color: #f2f2f2; border: 7px solid #dedede; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; position: relative; width: 225px; height: 225px; margin: 0 auto; border-radius: 50%; } .team-member .picture:hover img { -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); } .team-member .picture:hover .mask { -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; opacity: 1; } .team-member .picture:hover .mask .team-member-icons { -webkit-transition: all 0.8s ease-in-out; -moz-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } .team-member .picture img { margin: 0 auto; -webkit-transition: all 0.8s ease-in-out; -moz-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } .team-member .picture .mask { -webkit-transition: all 0.8s ease-in-out; -moz-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; opacity: 0; position: absolute; top: 0; border-radius: 50%; width: 100%; height: 100%; } .team-member .picture .mask .team-member-icons { -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); display: table; margin: 90px auto; } .team-member .picture .mask .team-member-icons a { background-color: #a5a5a5; border-radius: 50%; display: block; float: left; height: 34px; line-height: 32px; margin: 0 5px; width: 34px; } .team-member .picture .mask .team-member-icons a i { color: #fff; } </code></pre> <p>Everything works fine on Chrome or Firefox but on Internet Explorer (IE11) the image flickers when you "unhover" the circle with the social media icons.</p>