Tal121 Posted April 24, 2022 Share Posted April 24, 2022 Site URL: https://talshait.com/ Hi 🙂 I applyed a custom css to my site so my images will change on hover. It works, but when I add 2 blocks and put it together it's change location... In the edit it looks good, but when I click "Done"- it's change the images location... Look here:https://youtu.be/jXJoujE5Uo8 This is the code I use: .image-swap { position: relative; } .image-swap img:nth-child(1) { position: absolute; transition: .5s; } .image-swap img:nth-child(1):hover { opacity:0; } I want it change the order like this on mobile, but not at desktop. I would appreciate any help🙏 Link to comment
tuanphan Posted April 27, 2022 Share Posted April 27, 2022 Hi, This is a common problem when you are missing an opening or closing tag. Can you send all current code in both Code Blocks? We can check easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Tal121 Posted April 28, 2022 Author Share Posted April 28, 2022 On 4/27/2022 at 9:55 AM, tuanphan said: Hi, This is a common problem when you are missing an opening or closing tag. Can you send all current code in both Code Blocks? We can check easier Thanks! //remove play button// .background-pause-button.visible {display: none!important} //scroll bar color// body::-webkit-scrollbar { width: 10px; } body::-webkit-scrollbar-track { background: #F3F3F4; /*color of track*/ border-radius: 100rem; } body::-webkit-scrollbar-thumb { background: #B09073;/*color of scrollbar*/ border-radius: 100rem; } ///SMOOTH SCROLL/// html { scroll-behavior: smooth; } // Bounce Social Icons // @-webkit-keyframes hvr-pop { 50% { -webkit-transform: scale(1.2); transform: scale(1.2); } } @keyframes hvr-pop { 50% { -webkit-transform: scale(1.2); transform: scale(1.2); } } .sqs-block-socialaccountlinks-v2 a svg{ top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .sqs-block-socialaccountlinks-v2 a{ -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); } .sqs-block-socialaccountlinks-v2 a:hover{ -webkit-animation-name: hvr-pop; animation-name: hvr-pop; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } .social-icons-style-regular .sqs-use--icon{ fill: #000000 !important; } .social-icons-style-regular .sqs-svg-icon--wrapper:hover .sqs-use--icon{ fill: #C05746 !important; } // Text Highlight Selection Color // ::selection { background: #DCC1B2; color: #FFFFFF; } ::-moz-selection { background: #DCC1B2; color: #FFFFFF; } .header-nav-item:hover::after { width: 100%; } .header-nav-item--active a { background-image: none !important; } .image-swap { position: relative; } .image-swap img:nth-child(1) { position: absolute; transition: .5s; } .image-swap img:nth-child(1):hover { opacity:0; } // Shrinking Button On Hover // .sqs-block-button .sqs-block-button-element--medium { transition: transform 0.3s !important; } .sqs-block-button .sqs-block-button-element--medium:hover { opacity: 1 !important; transform: scale(0.9) !important; } .highlight { background: linear-gradient(180deg,rgba(255,255,255,0) 50%, #DAECEC 60%); } Link to comment
tuanphan Posted May 1, 2022 Share Posted May 1, 2022 Hi, I mean Code Block, where you added image, not code in Custom CSS Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Tal121 Posted May 1, 2022 Author Share Posted May 1, 2022 7 hours ago, tuanphan said: Hi, I mean Code Block, where you added image, not code in Custom CSS Oh! sorry. There are two code blocks that I put together into one section. This is the 1st code block: <div class="image-swap"> <img src="https://static1.squarespace.com/static/62515e4f1a8d297611cfa78e/t/62569259364b21209c16e853/1649840734553/panda-+before.jpg"> <img src="https://static1.squarespace.com/static/62515e4f1a8d297611cfa78e/t/6256923384f9dc0bc1c2ee22/1649840704433/panda-+after.png"> This is the 2nd code block: <div class="image-swap"> <img src="https://static1.squarespace.com/static/62515e4f1a8d297611cfa78e/t/6256988ecfdfd409016f5cba/1649842322758/YES-+before.jpg"> <img src="https://static1.squarespace.com/static/62515e4f1a8d297611cfa78e/t/62569898136c177915936c76/1649842333193/YES-+after.jpg"> Link to comment
tuanphan Posted May 5, 2022 Share Posted May 5, 2022 On 5/1/2022 at 9:12 PM, Tal121 said: Oh! sorry. There are two code blocks that I put together into one section. This is the 1st code block: <div class="image-swap"> <img src="https://static1.squarespace.com/static/62515e4f1a8d297611cfa78e/t/62569259364b21209c16e853/1649840734553/panda-+before.jpg"> <img src="https://static1.squarespace.com/static/62515e4f1a8d297611cfa78e/t/6256923384f9dc0bc1c2ee22/1649840704433/panda-+after.png"> This is the 2nd code block: <div class="image-swap"> <img src="https://static1.squarespace.com/static/62515e4f1a8d297611cfa78e/t/6256988ecfdfd409016f5cba/1649842322758/YES-+before.jpg"> <img src="https://static1.squarespace.com/static/62515e4f1a8d297611cfa78e/t/62569898136c177915936c76/1649842333193/YES-+after.jpg"> You have opening div tag <div> however you missing a closing </div> tag. The code should be <div class="image-swap"> <img src="https://static1.squarespace.com/static/62515e4f1a8d297611cfa78e/t/62569259364b21209c16e853/1649840734553/panda-+before.jpg"> <img src="https://static1.squarespace.com/static/62515e4f1a8d297611cfa78e/t/6256923384f9dc0bc1c2ee22/1649840704433/panda-+after.png"> </div> ( Line 04) Do similar for 2nd Code Block Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Tal121 Posted May 5, 2022 Author Share Posted May 5, 2022 3 hours ago, tuanphan said: You have opening div tag <div> however you missing a closing </div> tag. The code should be <div class="image-swap"> <img src="https://static1.squarespace.com/static/62515e4f1a8d297611cfa78e/t/62569259364b21209c16e853/1649840734553/panda-+before.jpg"> <img src="https://static1.squarespace.com/static/62515e4f1a8d297611cfa78e/t/6256923384f9dc0bc1c2ee22/1649840704433/panda-+after.png"> </div> ( Line 04) Do similar for 2nd Code Block WOW! Thank you so much 🙂 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment