CODEWITHSUNDEEP
htmlcss
Mario Parra
Mario Parra

Reputation: 1554

Part of Image Covered in Responsive View

I have an image animation that's created using a CSS mask, but for some reason, my media query's max-width: 100%; property on img is hiding/covering part of the image. If I remove it, it displays normally, but then the images aren't responsive.

Code/demo can be found here (resize Result window to reproduce): http://jsfiddle.net/x2hnomhs/.

Any help would be greatly appreciated. Thanks!

Upvotes: 0

Views: 65

Answers (2)

dippas
dippas

Reputation: 60563

Change the height:auto to height:100% in you @media screen and (max-width: 940px)

snippet:

.logo {
  display: block;
  width: 450px;
  margin: 0 auto;
  padding-bottom: 40px;
}
.logo a {
  display: block;
  height: 288px;
  overflow: hidden;
  width: 450px;
  position: relative;
}
.logo a img.logoMask {
  position: relative;
  z-index: 20;
  width: 100%;
  height: auto;
}
.logo a img.color {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 3px;
  -webkit-animation: logoColor 15s infinite; /* Chrome, Safari, Opera */
  animation: logoColor 15s infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes logoColor {
  0% {
    left: 0;
  }
  50% {
    left: -2500px;
  }
  100% {
    left: 0;
  }
}
/* Standard syntax */
@keyframes logoColor {
  0% {
    left: 0;
  }
  50% {
    left: -2500px;
  }
  100% {
    left: 0;
  }
}
@media screen and (max-width: 940px) {
  img {
    max-width: 100%;
    height: 100%;
  }
}
<div class="logo">
  <a style="padding-right: 0">
    <img src="http://api.marioparra.me/img/api-logo-mask.png" class="logoMask" />
    <img src="http://api.marioparra.me/img/api-logo-gradient.png" class="color" />
  </a>

</div>

UPDATE: Based on OP comments (clarifying what OP really wants to achieve)

Since you want to make the same kind of animationin all the viewport sizes and make it responsive here is a snippet (comments were added to explain changes):

.logo {
  display: block;
  max-width: 450px;
  /* changed from width to max-width */
  margin: 0 auto;
  padding-bottom: 40px;
  overflow: hidden;
  /* added this */
}
.logo a {
  display: block;
  height: 288px;
  overflow: hidden;
  max-width: 450px;
  /* changed from width to max-width */
  position: relative;
}
.logo a img.logoMask {
  position: relative;
  z-index: 20;
  width: 100%;
  height: auto;
}
.logo a img.color {
  position: absolute;
  z-index: 1;
  left: 0;
  top: -50%;
  /* changed from 3px to -50% */
  -webkit-animation: logoColor 5s infinite;
  /* Chrome, Safari, Opera */
  animation: logoColor 5s infinite;
}
/* Chrome, Safari, Opera */

@-webkit-keyframes logoColor {
  0% {
    left: 0;
  }
  50% {
    left: -2500px;
  }
  100% {
    left: 0;
  }
}
/* Standard syntax */

@keyframes logoColor {
  0% {
    left: 0;
  }
  50% {
    left: -2500px;
  }
  100% {
    left: 0;
  }
}
/*removed uncessary media queries because you are using now max-width in your parent container , with that your img {width:100%} it is enough to make it responsive. */

@media screen and (max-width: 480px) {
  .logo a img.color {
    top: -60%
  }
}
@media screen and (max-width: 360px) {
  .logo a img.color {
    top: -72%
  }
}
<div class="logo">
  <a style="padding-right: 0">
    <img src="http://api.marioparra.me/img/api-logo-mask.png" class="logoMask" />
    <img src="http://api.marioparra.me/img/api-logo-gradient.png" class="color" />
  </a>
</div>

Upvotes: 1

Alexis B.
Alexis B.

Reputation: 1115

I actually figured it out. Hope this is what you are looking for:

http://jsfiddle.net/x2hnomhs/2/

.logo {
    display: block;
    max-width: 450px;
    width: auto;
    margin: 0 auto;
    overflow: hidden;
}

.logo a {
    display: block;
    height: 100%;
    width: 100%;
    position: relative;    
}

.logo a img.logoMask {
    position: relative;
    z-index: 20;
    width: 100%;
    display: block;
    height: auto;
}

.logo a img.color {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 3px;
    -webkit-animation: logoColor 15s infinite; /* Chrome, Safari, Opera */
    animation: logoColor 15s infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes logoColor {
    0%   {left: 0;}
    50%  {left: -2500px;}
    100% {left: 0;}
}

/* Standard syntax */
@keyframes logoColor {
    0%   {left: 0;}
    50%  {left: -2500px;}
    100% {left: 0;}
}

Upvotes: 1

Related Questions