Blob shape hover effect on Squarespace 7.0 & 7.1 website || jishaansinghal Video: https://youtu.be/FWqlH7012vA Contact Us: https://www.fiverr.com/s/DBj4m3P #Blobshapehovereffect, #calculatoronsquarespace, #squarespace, #jishaansinghal,#css,#html,#js,#jquery,#squarespacewebsite,#customcode

-
Image
Blob shape hover effect on Squarespace 7.0 & 7.1 website || jishaansinghal Video: https://youtu.be/FWqlH7012vA Contact Us: https://www.fiverr.com/s/DBj4m3P #Blobshapehovereffect , #calculatoronsquarespace , #squarespace , #jishaansinghal , #css , #html , #js , #jquery , #squarespacewebsite , #customcode
Post a Comment

CSS 3d Layered Image Hover Effects CSS Isometric Design in 2022 with Source code | jishaansinghal

-








 <!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

body{

  margin: 0;

  padding: 0;

  display: flex;

  justify-content: center;

  align-items: center;

  background: #000;

  overflow: hidden;

}

.container{

  position: relative;

  width: 240px;

  height: 400px;

  margin-top: 150px;

  background:rgba(0, 0, 0, 0.1);

  transform: rotate(-30deg) skew(25deg) scale(0.8);

}

.container img{

position: absolute;

width: 100%;

height: 100%;

transition: .5s;

}

.container:hover img:nth-child(4){

  transform: translate(160px, -160px);

  opacity: 1;

}

.container:hover img:nth-child(3){

  transform: translate(120px, -120px);

  opacity: .8;

}

.container:hover img:nth-child(2){

  transform: translate(80px, -80px);

  opacity: .6;

}

.container:hover img:nth-child(1){

  transform: translate(40px, -40px);

  opacity: .4;


}


</style>





</head>

<body>

<div class="container">

<img src="img.png" alt="img">

<img src="img.png" alt="img">

<img src="img.png" alt="img">

<img src="img.png" alt="img">

</div>

</body>

</html>



Comments

Post a Comment

Popular posts from this blog

how to add a button as a circle button on the Squarespace by jishaansinghal

-
Image
  In this video, I'm showing you how to add a button as a circle button on the Squarespace button with custom CSS Code!    How To Install: Once a button has been added and saved, go to the Custom CSS Editor. Copy and paste the code below into the Custom CSS Editor box. This plugin uses a CSS editor and works with Squarespace 7.1, 7.0 to add an active effect on Button on Squarespace 7.1,7.0 by jishaansinghal. This code uses a CSS editor and works with Squarespace 7.1, 7.0 templates. This code uses CSS editor Copy and pastes the code below into the editor box. -------------------------------------------------------------------------------------------------------- // Circle Button Style o squarespace // .sqs-block-button-element--medium { padding : 100px 45px !important ; -webkit-border-radius : 50% !important ; -moz-border-radius : 50% !important ; border-radius : 50% !important ; } Customize: You do not need to change the transform or tra...
Read more

How to add Vector Scrolling GSAP animation Effects on your Squarespace Website in 2022 with full source code by jishaansinghal

-
Image
How to add GSAP animation Effects on your Squarespace Website in 2022 with full source code by jishaansinghal Source Code: Paste this code on Header code injection: <link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel='stylesheet' type='text/css'> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script> <script src="https://www.jqueryscript.net/demo/performant-scroll-gsap-vector/jquery.vs.min.js"></script> Paste this code on Footer code injection: <script> // And so concludes the new VectorScr...
Read more

Bouncing word change animation on Squarespace 7.0 & 7.1 website || jishaansinghal Video: https://youtu.be/X1ERq32l6ik Contact Us: https://www.fiverr.com/s/R7ko6EV #Bouncingwordchange, #squarespace, #jishaansinghal,#css,#html,#js,#jquery,#squarespacewebsite,#customcode

-
Image
Bouncing word change animation on Squarespace 7.0 & 7.1 website || jishaansinghal Video: https://youtu.be/X1ERq32l6ik Contact Us: https://www.fiverr.com/s/R7ko6EV #Bouncingwordchange , #squarespace , #jishaansinghal , #css , #html , #js , #jquery , #squarespacewebsite , #customcode
Read more