CODEWITHSUNDEEP
htmltwitter-bootstrapcss
Jona
Jona

Reputation: 91

Image flickering in Internet Explorer with transition and scale

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.

Here you can see my code: https://jsfiddle.net/johna/L9hbtqce . (I also use Bootstrap as CSS Framework and Font Awesome for the icons.)

HTML

<div class="team-member text-center">
<div class="picture">
    <img src="http://s22.postimg.org/hxl9mdjqp/member.png" class="img-responsive" alt="Ward"/>
    <div class="mask">
        <div class="team-member-icons">
            <a target="_blank" href="#">
                <i class="fa fa-facebook"></i>
            </a>
            <a target="_blank" href="#">
                <i class="fa fa-twitter"></i>
            </a>
        </div>
    </div>
</div>

CSS

.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;
}

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.

Upvotes: 4

Views: 1270

Answers (1)

Jona
Jona

Reputation: 91

Fixed my problem on Internet Explorer: https://jsfiddle.net/L9hbtqce/15/. I added an opacity of 1 to the image and an opacity of 0 when you hover over the image.

.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);
  opacity: 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;
  width: 100%;
  height: 100%;
  -ms-transition: 1s;
  transition: 1s;
  -moz-transform: scale(1);
  -o-transform: scale(1);
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 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;
}

Upvotes: 2

Related Questions