Tal121

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 🙂

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

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

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🙏

6 hours ago, bangank36 said:

Try adding to Home > Design > Custom Css

.image-swap {
  position: relative;
}

Let me know how it works on your site

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