Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • July 3, 2017 at 9:27 am #815763
    Uros

    How to create smooth transition on image hover?

    i used this code in function.php to change image on mouse hover

    function add_custom_image(){
    ?>
    <script>
    jQuery(window).load(function(){
    jQuery(‘.zamena img’).hover(function(){
    jQuery(‘.zamena img’).attr(‘src’,’IMG URL’);
    });
    jQuery(‘.zamena img’).mouseleave(function(){
    jQuery(‘.zamena img’).attr(‘src’,’IMG URL’);
    });
    });
    </script>
    <?php
    }
    add_action(‘wp_footer’, ‘add_custom_image’);

    i also tried using “.zamena” css class to create smoother transition by typing

    .zamena img{
    transition: all 1s ease-in-out;
    }

    but that did not work.

    You can check that on my website https://www.webfabrika.rs
    look for four icons (image) and hover it. How to make that smoother transition?

    July 3, 2017 at 12:00 pm #815823
    Nikko

    Hey Uroš,

    Please try to change your code similar to the solution here: https://stackoverflow.com/questions/5979418/jquery-change-image-src-with-fade-effect Hope this helps :)

    Best regards,
    Nikko

    July 3, 2017 at 10:25 pm #816082
    Uros

    I did something like this, but fading is reacting strange…like doubling fade out, fade in , fade out, fade in…how to stop fading after one set of fadeout fadein?

    should i place “return false” somewhere? i tried to put at the end of the code but that did not work

    function add_custom_image(){
    ?>
    <script>
    jQuery(window).load(function(){
    jQuery(‘.zamena img’).hover(function(){
    jQuery(‘.zamena img’).fadeOut(1000, function() {
    jQuery(‘.zamena img’).attr(‘src’,url’);
    });
    });
    jQuery(‘.zamena img’).mouseleave(function(){
    jQuery(‘.zamena img’).fadeIn(1000, function() {
    jQuery(‘.zamena img’).attr(‘src’,’url’);
    });
    });
    </script>
    <?php
    }
    add_action(‘wp_footer’, ‘add_custom_image’);

    • This reply was modified 7 years ago by Uros.
    July 3, 2017 at 11:08 pm #816092
    Uros

    found this link

    Creating a Mouseover Fade Effect with jQuery

    how to combine code from that link

    $(“css class”).hover(
    function() {
    $(this).stop().animate({“opacity”: “0”}, “slow”);
    },
    function() {
    $(this).stop().animate({“opacity”: “1”}, “slow”);
    });
    });

    white this code you provide

    function add_custom_image(){
    ?>
    <script>
    jQuery(window).load(function(){
    jQuery(‘.zamena img’).hover(function(){
    jQuery(‘.zamena img’).attr(‘src’,’URL’);
    });
    jQuery(‘.zamena img’).mouseleave(function(){
    jQuery(‘.zamena img’).attr(‘src’,’URL’);
    });
    });
    </script>
    <?php
    }
    add_action(‘wp_footer’, ‘add_custom_image’);

    to get smooth image transition

    i tried to copy/paste code from that link i provide into code block but image is not responsive and on mobile content beneath image is over image

    • This reply was modified 7 years ago by Uros.
    July 10, 2017 at 6:30 am #818559
    Ismael

    Hi,

    Please try the following script.

    // swap image
function ava_custom_script_mod(){
?>
<script>
(function($){
	  var b = function(selector, swap) {
			$(selector).fadeOut(300, function(){
				$(selector).attr('src', swap).bind('onreadystatechange load', function(){
					 if (selector.complete) $(selector).fadeIn(300);
				});
			});
		}

		var a = function(selector, swap) {
			$(selector).on({
				mouseenter: function(e) {
					var img = $(this).attr('src');
					$(this).data('orgimg', img);
					b(this, swap);
				},
				mouseleave: function(e) {
					var org = $(this).data('orgimg');
					b(this, org);
				}
			}, "img");
		}

		a('.zamena1', 'http://localhost/kriesi/enfold/wp-content/uploads/2017/05/a0d3db50748487.58ecee7771028.jpg');
		a('.zamena2', 'http://localhost/kriesi/enfold/wp-content/uploads/2017/05/480a6950748487.58e4b1170c7f8.jpg');
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'ava_custom_script_mod');

    Use the following function to apply the hover effect.

    a(class-attribute, image-to-swap);

    Example:

    a('.zamena1', 'IMAGE TO SWAP');
 a('.zamena2', 'IMAGE TO SWAP');

    Best regards,
    Ismael

    July 10, 2017 at 9:24 am #818606
    Uros

    awesome…thank you very much

    July 10, 2017 at 9:49 am #818610
    Nikko

    Hi,

    Glad that Ismael helped you. Thanks for using Enfold :)

    Best regards,
    Nikko

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘smooth image hover’ is closed to new replies.