Two Side Image

Written by @kerixa 12 May 2020

One amazing way to make your images look different is to design them to have two sides. When the visitors hover them the second side will appear. See the demo below!

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.javascriptfreecode.com coded by: Kerixa Inc. -->
                               
<style>
body {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  height: 100vh;
  background: black;
}

.scene {
  width: 300px;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
  -webkit-perspective: 800px;
          perspective: 800px;
}
.scene .card {
  position: relative;
  width: 240px;
  height: 300px;
  color: white;
  cursor: pointer;
  -webkit-transition: 1s ease-in-out;
  transition: 1s ease-in-out;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.scene .card:hover {
  -webkit-transform: rotateY(0.5turn);
          transform: rotateY(0.5turn);
}
.scene .card .card__face {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transition: 1s ease-in-out;
  transition: 1s ease-in-out;
  -webkit-box-reflect: below 0 linear-gradient(transparent, transparent, rgba(0, 0, 0, 0.4));
}
.scene .card .card__face img {
  width: 240px;
  height: 300px;
  -o-object-fit: cover;
     object-fit: cover;
}
.scene .card .card__face--back {
  -webkit-transform: rotateY(0.5turn);
          transform: rotateY(0.5turn);
}
</style>

<div class="scene">
<div class="card">
<div class="card__face card__face--front">
<img src="https://www.javascriptfreecode.com/files/12-a.webp" />
</div>
<div class="card__face card__face--back">
<img src="https://www.javascriptfreecode.com/files/12-b.jpg" />
</div>
</div>
</div><a target='_blank' href='https://www.javascriptfreecode.com' style='font-size: 8pt; text-decoration: none'>JavaScript Best Codes</a>                                                
                                            

Example:


About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

K

Comments


Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300

TRENDING POST
1
2
3
4
5
VISITORS
Online Users: 12
Recent Members: admin_js, bloxio, yqaice, flooketsu, phuang_test
advertisement 2