Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #815763

    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?

    #815823

    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

    #816082

    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, 5 months ago by Uros.
    #816092

    found this link

    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, 5 months ago by Uros.
    #818559

    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

    #818606

    awesome…thank you very much

    #818610

    Hi,

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

    Best regards,
    Nikko

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