Click here to Skip to main content
15,867,834 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I want to flip images in div on click.I have one small image and one large image in div when i click on div two images are flipping.
for reference please check
]
here is my code
XML
<html>
<head>

<script type="text/javascript" src="j7.js"></script>
<script type="text/javascript">
$(".cont").click(function(){
 $(this).toggleClass("rotator")  ;
})
</script>
<style type="text/css">
.info, .image{
    position:absolute;
    -webkit-transition: -webkit-transform 1s , z-index 0s 0.25s;

}

.info{padding:10px;
    width: 160px;
    height: 160px;
  z-index: -2;
  -webkit-transform: rotateY(180deg);
  background-color: rgba(255,255,255,0.8);

}

.image{
    z-index: -1;
    -webkit-transition: -webkit-transform 1s, z-index 0s 0.25s;
    -webkit-transform: rotateY(0deg);
}

.rotator{

     width:160px;
    height: 160px;
}

.rotator .info{
    -webkit-transition: -webkit-transform 1s, z-index 0s 0.25s;
    z-index: -1;
    -webkit-transform: rotateY(0deg);

}
.rotator  .image{
    -webkit-transform: rotateY(180deg);
    -webkit-transition: -webkit-transform 1s, z-index 0s 0.25s;;
    z-index: -2;
}
</style>
</head>
<body>
<div class="cont">
    <img class="image" src="pint.png">
    <div class="info"> <img class="image" src="image.png"> </div>
</div>
</body>

</html>
Posted
Comments
Sergey Alexandrovich Kryukov 29-Oct-15 2:22am    
Are you really trying to develop code compatible only with Webkit?
—SA
Hussain Javed 29-Oct-15 2:36am    
I want to do same as in that link,
please once check link
http://www.houseofblouse.com/design/u-neck-2
Sergey Alexandrovich Kryukov 29-Oct-15 2:58am    
I answered in Solution 2, you also got Solution 1.
—SA
Krunal Rohit 29-Oct-15 3:02am    
I think, he really trying to do so. :)

-KR
Hussain Javed 29-Oct-15 3:03am    
can you give any example for this, like it is in link
http://www.houseofblouse.com/design/u-neck-2

You can try something like this:

HTML:
HTML
<div class="f1_container">
    <div class="shadow f1_card">
        <div class="front face">
            <img src="http://media-cdn.tripadvisor.com/media/photo-s/03/48/0b/14/dolphin-view-chalets.jpg" style="height: 281px; width: 450px;" />
        </div>
        <div class="back face center">
            <img src="http://media-cdn.tripadvisor.com/media/photo-s/03/48/0b/14/dolphin-view-chalets.jpg" style="height: 281px; width: 450px;" />
        </div>
    </div>
</div>


CSS:
CSS
.f1_container {
    position: relative;
    margin:10px;
    width: 450px;
    height: 281px;
    z-index : 1;
    float:left;
}
.f1_container {
    -webkit-perspective: 1000;
    perspective: 1000;
}
.f1_card {
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: all 1.0s linear;
    transform-style: preserve-3d;
    transition: all 1.0s linear;
}
.f1_container.active .f1_card {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    box-shadow: -5px 5px 5px #aaa;
}
.face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.face.back {
    display: block;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    box-sizing: border-box;
    color: white;
    text-align: center;
    background-color: #aaa;
}


DEMO: Fiddle[^]
 
Share this answer
 
Comments
Hussain Javed 29-Oct-15 2:39am    
yes,but i have two images in div one small at top corner and one big.
once check this link
http://www.houseofblouse.com/design/u-neck-2
Palash Mondal_ 29-Oct-15 4:43am    
Is the demo fiddle[^] working for you?
Hussain Javed 29-Oct-15 4:26am    
I have tried on example but it is not working
here is my code,please check once
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.js"></script>

<script type="text/javascript">
$(document).ready(function()){
$(".cont").onclick(function(){
$(this).toggleClass("rotator") ;
});
});
</script>
<style type="text/css">
.info, .image{
position:absolute;
-webkit-transition: -webkit-transform 1s , z-index 0s 0.25s;

}

.info{padding:10px;
width: 160px;
height: 160px;
z-index: -2;
-webkit-transform: rotateY(180deg);
background-color: rgba(255,255,255,0.8);

}

.image{
z-index: -1;
-webkit-transition: -webkit-transform 1s, z-index 0s 0.25s;
-webkit-transform: rotateY(0deg);
}

.rotator{

width:160px;
height: 160px;
}

.rotator .info{
-webkit-transition: -webkit-transform 1s, z-index 0s 0.25s;
z-index: -1;
-webkit-transform: rotateY(0deg);

}
.rotator .image{
-webkit-transform: rotateY(180deg);
-webkit-transition: -webkit-transform 1s, z-index 0s 0.25s;;
z-index: -2;
}</style>
</head>
<body>
<div class="cont">
<img class="image" src="image.jpg" width="50" height="40"/>
<div class="info"> hello welcome to elife</div>
</div></body>

</html>
Palash Mondal_ 29-Oct-15 4:42am    
Let me see this code of yours.
Hussain Javed 29-Oct-15 7:13am    
have you seen my code
 
Share this answer
 
Comments
Hussain Javed 29-Oct-15 3:02am    
There is nothing similar to my project flip.there is no demo.have you seen my link
Sergey Alexandrovich Kryukov 29-Oct-15 3:17am    
Your description is more than enough. You got complete recipe, even if you pretend you did not.
Perhaps you misused some terms in your description, but sorry, this is your problem. "Flip" really means scaling by -1.
—SA
Hussain Javed 29-Oct-15 3:19am    
what you have told i can't understand?
Sergey Alexandrovich Kryukov 29-Oct-15 3:20am    
Sorry, if you don't understand something in particular, all you need is to ask about it.
—SA
Hussain Javed 29-Oct-15 4:13am    
i have tried ur code it is not getting
here is my code
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script>

<script type="text/javascript">
$('.f1_container').click(function() {
$(this).toggleClass('active');
});
</script>
<style type="text/css">
.f1_container {
position: relative;
margin:10px;
width: 450px;
height: 281px;
z-index : 1;
float:left;
}
.f1_container {
-webkit-perspective: 1000;
perspective: 1000;
}
.f1_card {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: all 1.0s linear;
transform-style: preserve-3d;
transition: all 1.0s linear;
}
.f1_container.active .f1_card {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
box-shadow: -5px 5px 5px #aaa;
}
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.face.back {
display: block;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
box-sizing: border-box;
color: white;
text-align: center;
background-color: #aaa;
}
body{width:2000px}
</style>
</head>
<body>
<div class="f1_container">
<div class="shadow f1_card">
<div class="front face">
<img src="http://media-cdn.tripadvisor.com/media/photo-s/03/48/0b/14/dolphin-view-chalets.jpg" style="height:

281px; width: 450px;" />
</div>
<div class="back face center">Some text inside here</div>
</div>
</div>

<div class="f1_container">
<div class="shadow f1_card">
<div class="front face">
<img src="http://media-cdn.tripadvisor.com/media/photo-s/03/48/0b/14/dolphin-view-chalets.jpg" style="height:

281px; width: 450px;" />
</div>
<div class="back face center">Some text inside here</div>
</div>
</div>

<div class="f1_container">
<div class="shadow f1_card">
<div class="front face">
<img src="http://media-cdn.tripadvisor.com/media/photo-s/03/48/0b/14/dolphin-view-chalets.jpg" style="height:

281px; width: 450px;" />
</div>
<div class="back face center">Some text inside here</div>
</div>
</div>

<div class="f1_container">
<div class="shadow f1_card">
<div class="front face">
<img src="http://media-cdn.tripadvisor.com/media/photo-s/03/48/0b/14/dolphin-view-chalets.jpg" style="height:

281px; width: 450px;" />
</div>
<div class="back face center">Some text inside here</div>
</div>
</div>
</body>

</html>

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900