#Introduction
-Kendo UI effects gives you a rich, intuitive, and performance-optimized toolset for element transitions. There are many effects like Expand, including Expand, Fade, Slide in, Flip, Tile, and others. You will discover how to use the Kendo UI tile effects with JQuery in this blog post.
#Tile Effect
-Because the effects are handled via CSS transitions, they work well on both desktop and mobile devices.
-We must initialise FX instances as a first step. JQuery Kendo is used. to construct an FX instance, use the fx selector wrapper.
#Example:-
<!DOCTYPE html>
<html>
<head>
<style>
html {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title>Kendo-UI</title>
<link rel=”stylesheet” href=”https://kendo.cdn.telerik.com/2022.1.119/styles/kendo.default-main.min.css” />
<script src=”https://kendo.cdn.telerik.com/2022.1.119/js/jquery.min.js”></script>
<script src=”https://kendo.cdn.telerik.com/2022.1.119/js/kendo.all.min.js”></script>
</head>
<body>
<h3>Kenod-UI</h5>
<div id=”example”>
<div id=”wraps”>
<img id=”gowtham” src=”/Practice/images (1).jpg”/>
</div>
</div>
<script>
$(‘#wraps img’).hover(function(){
kendo.fx(this).zoom(“in”).startValue(1).endValue(2).play();
}, function(){
kendo.fx(this).zoom(“out”).endValue(1).startValue(2).play();
});
</script>
<style>
#wraps {
background-image: url(“/Practice/istockphoto-1423284665-170667a.jpg”);
background-repeat: repeat-y;
width: 655px;
height: 298px;
margin: 2.5em auto;
position: relative;
-webkit-transform: translateZ(0);
}
#wraps img {
position: absolute;
width: 150px;
bottom: 120px;
}
</style>
</body>
</html>
#Output:-
Zoom out
Zoom In
