Tal121

WOW! Thank you so much 🙂

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">

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%); }

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🙏

Thank you!!! Appreciate a lot 🙂

Site URL: https://talshait.com/ Hi 🙂 I made a custom css for image swap on hover like this video: https://youtu.be/7WC906n4t5c. Here is the code I used .image-swap img:nth-child(1) { position: absolute; transition: .5s; } .image-swap img:nth-child(1):hover { opacity:0; } In the edit page it's looking great! But in my website the top image is bigger then the bottom image (https://talshait.com/work/color). Here is my video screenshot: https://youtu.be/Hvf7Re0VGKQ I would appreciate any help