By using Js/jQuery we can animate with the images. In this we are going to implement fade in/fade out effect using jQuery.
Step 1: Add jQuery CDN in your page:
- <head>
- <meta charset="utf-8" />
- <title></title>
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
- </head>
- <style>
- .img_outer {
- width: 310px;
- height: 344px;
- position: relative;
- float: left;
- margin: 10px;
- }
-
- .img_outer img {
- position: absolute;
- z-index: 1;
- cursor: pointer;
- }
-
- .img_blur {
- opacity: 0.84;
- }
- </style>
- <body style="height: 1000px">
- <div class="list_leftp">
- <div class="img_outer">
- <a href="#" data-hr="http://www.firstcry.com"> <img src="http://cdn.fcglcdn.com/brainbees/banners/04Dec15-todaysdeal4.jpg" alt="" title="" /> </a>
- </div>
- <div class="img_outer">
- <a href="#" data-hr="http://www.firstcry.com"> <img src="http://cdn.fcglcdn.com/brainbees/banners/04Dec15-todaysdeal4.jpg" alt="" title="" /> </a>
- </div>
- <div class="img_outer">
- <a href="#" data-hr="http://www.firstcry.com"> <img src="http://cdn.fcglcdn.com/brainbees/banners/04Dec15-todaysdeal4.jpg" alt="" title="" /> </a>
- </div>
- <div class="img_outer">
- <a href="#" data-hr="http://www.firstcry.com"> <img src="http://cdn.fcglcdn.com/brainbees/banners/04Dec15-todaysdeal4.jpg" alt="" title="" /> </a>
- </div>
- </div>
- </body>
Step 4: Now main step, we have to write j Query script for implementing effect.
- <script type="text/javascript">
- $(document).ready(function(e)
- {
- $('img').hover(function()
- {
- $('.img_outer img').addClass('img_blur');
- $(this).removeClass('img_blur').animate(
- {
- 'left': '-10px',
- 'top': '-10px',
- 'width': '330px'
- });
- }, function()
- {
- $('.img_outer img').removeClass('img_blur');
- $(this).animate(
- {
- 'left': '0',
- 'top': '0',
- 'width': '310px'
- });
- });
- $(document).on('click', 'a', function(event)
- {
- var x = $(this).attr('data-hr');
- $(this).find('img').fadeOut(700).fadeIn(700, function(event)
- {
- window.open(x, "_blank");
- });
- event.preventDefault();
- });
- });
- </script>
On hower event of an Image img_blur class is added for opacity for an image. After this step, left, top and width properties are set to animate an image.
Once these properties are set, remove that particular class and reset all those properties to their default values.
Remaining lines of code is for redirection and fade in/fade out effect of an image.
When you click on the image (<a>), value of data-hr attribute is stored in variable x. In the step, we have set time for fade in & fade out effect in milliseconds.
Guys, hope you understand the concept. Please take help from attached code if you require. If you have any query, feel free to contact me.