0

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!

Mario Parra
  • 1,504
  • 3
  • 21
  • 46
  • Refer this question http://googleweblight.com/?lite_url=http://stackoverflow.com/questions/11736363/responsive-images-with-css&ei=qIm0jrM_&lc=en-IN&s=1&m=25&ts=1437755085&sig=AKQ9UO-alhUaPGlkI2MeoJABlUAgjMZaKg – Saravanan Arunagiri Jul 24 '15 at 16:26

2 Answers2

1

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;}
}
Alexis B.
  • 1,105
  • 8
  • 13
1

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>
dippas
  • 58,591
  • 15
  • 114
  • 126
  • Thanks, but I tried this and it causes the image to be completely hidden/covered--it needs to be visible as the animation scrolls sideways. – Mario Parra Jul 24 '15 at 17:05
  • Hmm I didn't when I ran your code and resized the window – Mario Parra Jul 24 '15 at 17:09
  • Ok I see you don't want to get blank between images (animation start/finish), I thought you want 2 kind of `animations´ for different viewports. If you want, I can update my answer and tell you the fix – dippas Jul 24 '15 at 17:10
  • Yeah, I thought it might've been a little confusing. If you can help, that'd be great – Mario Parra Jul 24 '15 at 17:20
  • This is better, but I still need a media query with `max-width: 100%;` for `img` since there are other images throughout the website that contains this. I also noticed that in your code, the image gets cut off a little at the bottom (in desktop and mobile) – Mario Parra Jul 24 '15 at 17:54
  • for images that is cutting of, just play with the `top:-50%`, if you want to use images with `max-width:100%` across site then just set this ones `max-width:none` – dippas Jul 24 '15 at 17:56
  • That did it, and I'm so close, but now there's an issue with the height in mobile and I'm not sure how to fix it without setting static values: http://quirktools.com/screenfly/#u=http%3A//api.marioparra.me&w=375&h=667&a=37&s=1 – Mario Parra Jul 24 '15 at 18:51
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/84215/discussion-between-dippas-and-mario-parra). – dippas Jul 24 '15 at 18:54