Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #974151

    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, 4 months ago by Archie.
    #974269

    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

    #974293

    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! :)

    • This reply was modified 6 years, 4 months ago by Archie.
    #974347

    Hi Archie,

    You did not use this part
    Image 2018-06-18 at 17.26.46.png

    Please check now.

    Best regards,
    Victoria

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.