Hello Readers , here is a simple blog on flipping effect horizontally and vertically using jquery flip() method on mouse hover. On mouse hover image will flip and we will see some text in a div having background color. For this make a html file, a css file and a jquery file.
Step 1: Make a file named index.html and copy the below written code in that file.
<!doctype html>
<head>
<link type="text/stylesheet" href="style.css" rel="stylesheet" >
</head>
<body>
<h2>Horizontal Flip</h2>
<div class="flip-horizontal">
<div class="front">
<img src="1.jpeg" alt="" />
</div>
<div class="back">
<h3>Backside!</h3>
</div>
</div>
<h2>Vertical Flip</h2>
<div class="flip-vertical">
<div class="front">
<img src="1.jpeg" alt="" />
</div>
<div class="back">
<h3> Backside!</h3>
</div>
</div>
</body>
</html>
Step 2: Now make a CSS file named style.css and copy the below code in that file.
.flip-horizontal {
height: 170px;
width: 300px;
margin: 10px auto;
}
.flip-horizontal img {
width: 300px;
height: auto;
}
.flip-horizontal .back {
background: #cc0000;
color: #fff;
text-align: center;
}
.flip-vertical{
height: 170px;
width: 300px;
margin: 0 auto;
}
.flip-vertical img {
width: 300px;
height: auto;
}
.flip-vertical .back{
background: #cc0000;
color: #fff;
text-align: center;
}
h2 {text-align:center;}
Step 3: Now write the below written jquery function in your html file before body tag closed.
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="jquery.flip.min.js"></script>
<script>
$(function(){
$(".flip-horizontal").flip({
trigger: 'hover'
});
});
</script>
<script>
$(function(){
$(".flip-vertical").flip({
trigger: 'hover',
axis: 'x'
});
});
</script>
Comment: Here I have used jquery flip function to flip image .By defaut this method flip your image horizontally, therefore flip-horizontally div will flip horizontally on mouse hover. To make your div flip vertically , I gave argument axis: x, and image will flip vertically on mouse hover.
0 Comment(s)