beknorris Posted April 16 Posted April 16 Hi! I've been working on my homepage for this website. I added some code to make some images flip over with text on the back. However, this effect won't work on mobile version. How do I adjust the code so that it only functions on the desktop version? Here is the code I used: /*Card Flip Effect*/ #block-yui_3_17_2_1_1713154230326_30335, #block-yui_3_17_2_1_1713154230326_25756, #block-yui_3_17_2_1_1713154230326_27995, #block-yui_3_17_2_1_1713154230326_26815, #block-yui_3_17_2_1_1713154230326_31490{ /* Default Setup */ &.image-block .sqs-block-content{ perspective: 2000px; } .design-layout-poster { position: relative; transition: transform 0.8s; transform-style: preserve-3d; } //Image .design-layout-poster .intrinsic{ -webkit-backface-visibility: hidden; backface-visibility: hidden; } //Caption .design-layout-poster figcaption{ -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: rotateY(180deg); background: hsla(0,0%,100%,1); //Add if needed //border-radius: 20px; } /*Hover Effect*/ &.image-block:hover .design-layout-poster { transform: rotateY(180deg); } }
tuanphan Posted April 18 Posted April 18 You can change your code to this @media screen and (min-width:992px) { /*Card Flip Effect*/ #block-yui_3_17_2_1_1713154230326_30335, #block-yui_3_17_2_1_1713154230326_25756, #block-yui_3_17_2_1_1713154230326_27995, #block-yui_3_17_2_1_1713154230326_26815, #block-yui_3_17_2_1_1713154230326_31490{ /* Default Setup */ &.image-block .sqs-block-content{ perspective: 2000px; } .design-layout-poster { position: relative; transition: transform 0.8s; transform-style: preserve-3d; } //Image .design-layout-poster .intrinsic{ -webkit-backface-visibility: hidden; backface-visibility: hidden; } //Caption .design-layout-poster figcaption{ -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: rotateY(180deg); background: hsla(0,0%,100%,1); //Add if needed //border-radius: 20px; } /*Hover Effect*/ &.image-block:hover .design-layout-poster { transform: rotateY(180deg); } } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
beknorris Posted April 18 Author Posted April 18 (edited) Thank yo so much, tuanphan! Edited April 19 by beknorris
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment