Custom hover animation on image - image not responsive on mobile - Support

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts

June 18, 2018 at 10:51 am #974151

Archie

Participant

Hi there Enfold team!

I added a grayscale-to-colored fade in hover animation to the profile photo here:

http://circle2media.com/about

Image code on page is:

<div id="cf">
  <img class="bottom" src="http://circle2media.com/wp-content/uploads/2018/06/mikeprofilecolored.png" width="560" height="550" />
  <img class="top" src="http://circle2media.com/wp-content/uploads/2018/06/mikeprofilegrayscale.png" width="560" height="550" />
</div>

Quick CSS is:

#cf {
  position:relative;
  height:550px;
  width:550px;
  margin:0 auto;
}

#cf img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#cf img.top:hover {
  opacity:0;
}

Unfortunately, the image is not response on mobile view. Can you look into this please?

Thank you so much!

This topic was modified 6 years, 6 months ago by Archie.

June 18, 2018 at 2:19 pm #974269

Victoria

Inactive Moderator

Hey Archie,

This code should be wrapped in the media query:



@media only screen and (min-width: 1024px) {
  #cf {
    position:relative;
    height:550px;
    width:550px;
    margin:0 auto;
  }
}
@media only screen and (max-width: 767px) {
   #cf {
    position:relative;
    height:80vw;
    width:75vw;
    margin:0 auto;
  }

}

Best regards,
Victoria

June 18, 2018 at 3:00 pm #974293

Archie

Participant

Hi Victoria!

I am currently using this code:

@media only screen and (min-width: 1024px) {
#cf {
  position:relative;
  height:550px;
  width:550px;
  margin:0 auto;
      }
}

#cf img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#cf img.top:hover {
  opacity:0;
}

This is how it appears:

Desktop View:
http://i68.tinypic.com/2l8x8j7.png

Mobile View:
http://i63.tinypic.com/1tllwj.png

Can you send me the complete code I can use to replace the current code I am using now?

Thank you so much! :)