![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
-
AuthorPosts
-
July 3, 2017 at 9:27 am #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?July 3, 2017 at 12:00 pm #815823Hey 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,
NikkoJuly 3, 2017 at 10:25 pm #816082I 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, 2 months ago by
Uros.
July 3, 2017 at 11:08 pm #816092found 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, 2 months ago by
Uros.
July 10, 2017 at 6:30 am #818559Hi,
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,
IsmaelJuly 10, 2017 at 9:24 am #818606awesome…thank you very much
July 10, 2017 at 9:49 am #818610Hi,
Glad that Ismael helped you. Thanks for using Enfold :)
Best regards,
Nikko -
This reply was modified 7 years, 2 months ago by
-
AuthorPosts
- The topic ‘smooth image hover’ is closed to new replies.