Category in Product page on Squarespace 7.0 & 7.1 website || Jishaansinghal Video: https://youtu.be/lFW0X5qjRso Contact Us: https://www.fiverr.com/s/5r9v8l3 #squarespace, #CategoryinProductpage,#jishaansinghal,#css,#html,#js,#jquery,#squarespacewebsite,#customcode

-
Image
Category in Product page on Squarespace 7.0 & 7.1 website || Jishaansinghal Video: https://youtu.be/lFW0X5qjRso Contact Us: https://www.fiverr.com/s/5r9v8l3 #squarespace , #CategoryinProductpage , #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 install and use owl carousel mousewheel animation slider with full source code by jishaansinghal 2022

-
Image
How to install and use owl carousel mouse wheel animation slider with full source code by jishaansinghal 2022 Source Code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"/> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css"/> <style> body{ background-image: linear-gradient(to right top, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1); height: 70vh; } img{ width: 100%; height: 250px; } </style> </head> <body> <div class="owl-carousel owl-theme" style=...
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