Viewing 4 posts - 1 through 4 (of 4 total)
-
AuthorPosts
-
June 18, 2018 at 10:51 am #974151
Hi there Enfold team!
I added a grayscale-to-colored fade in hover animation to the profile photo here:
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.
June 18, 2018 at 2:19 pm #974269Hey 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,
VictoriaJune 18, 2018 at 3:00 pm #974293Hi 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.pngMobile View:
http://i63.tinypic.com/1tllwj.pngCan 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.
June 18, 2018 at 4:32 pm #974347 -
AuthorPosts
Viewing 4 posts - 1 through 4 (of 4 total)
- You must be logged in to reply to this topic.