Foundation 4 - image hover effect to display alternate image

Question

Foundation 4 - image hover effect to display alternate image

I am a newcomer to Foundation 4, but I have some coding experience. Currently, I am in the process of transitioning my photography blog (www.momentaryawe.com/blog) from Wordpress with a custom theme to a custom theme built on Foundation 4.

Most aspects of the transition have gone smoothly, however, I have hit a roadblock. If you visit this link () you will see that currently when someone hovers over an image, another image is displayed which is the original shot from the camera. Both images are uploaded when the post is created. This hover effect is achieved through the following jQuery code:

$(function() { 
  $("#rolloverOriginal ul li").hover(
    function() { 
        $(this).find('p').fadeIn(); 
    },
    function() { 
        $(this).find('p').fadeOut();
    }
);
});

My issue arises because Foundation 4 uses Zepto which does not support the hover option. I am unsure of how to replicate this effect using Foundation 4. I considered using Orbit for this, but so far I have been unable to get it to work on hover.

javascript jquery css zurb-foundation

Answer 1

Answer №1

If you prefer, you can choose to skip using zepto and go with jQuery instead. To implement this change in your code, simply adjust it to include the jQuery file or opt for a CDN:

<!-- Check for Zepto support, load jQuery if necessary -->
<script>
  document.write('<script src=/js/vendor/'
    + ('__proto__' in {} ? 'zepto' : 'jquery')
    + '.js><\/script>');
</script>

This adjustment results in:

<!-- Check for Zepto support, load jQuery if necessary -->
<script>
  document.write('<script src=/js/vendor/jquery.js><\/script>');
</script>

Alternatively, you can use a CDN version:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>

In my experience, due to browser compatibility issues with zepto, I find jquery to be a more reliable choice.

Update: I have incorporated jquery v1.10.1 into the code, but note that hover is not supported. In such cases, you can replace it with mouseenter and mouseleave. Here's an example:

$(function() { 
  $("#rolloverOriginal ul li")
    .on('mouseenter', function() { 
        $(this).find('p').fadeIn(); 
    })
    .on('mouseleave', function() { 
        $(this).find('p').fadeOut();
    });
});

Answer 2

If you prefer, you can choose to skip using zepto and go with jQuery instead. To implement this change in your code, simply adjust it to include the jQuery file or opt for a CDN:

<!-- Check for Zepto support, load jQuery if necessary -->
<script>
  document.write('<script src=/js/vendor/'
    + ('__proto__' in {} ? 'zepto' : 'jquery')
    + '.js><\/script>');
</script>

This adjustment results in:

<!-- Check for Zepto support, load jQuery if necessary -->
<script>
  document.write('<script src=/js/vendor/jquery.js><\/script>');
</script>

Alternatively, you can use a CDN version:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>

In my experience, due to browser compatibility issues with zepto, I find jquery to be a more reliable choice.

Update: I have incorporated jquery v1.10.1 into the code, but note that hover is not supported. In such cases, you can replace it with mouseenter and mouseleave. Here's an example:

$(function() { 
  $("#rolloverOriginal ul li")
    .on('mouseenter', function() { 
        $(this).find('p').fadeIn(); 
    })
    .on('mouseleave', function() { 
        $(this).find('p').fadeOut();
    });
});

Foundation 4 - image hover effect to display alternate image

Answer №1

Similar questions

The font size of the textarea dynamically adjusts based on the size of the screen

Issue with MaterialUI value prop not updating after dynamic rendering of components when value state changes

Optimizing communication of time data in Laravel and Vue.js using Inertia

The conversion of a 2D json array into a string is mistakenly performed

`Failure to prompt an error following an unsuccessful post request in a node.js application using axios and express`

Guide on accessing and displaying data table values in console.log using Vue.js and vuetify

Managing project versions and branches with gulp as the source control system

Can text be replaced without using a selector?

Combining two items from separate arrays

Utilizing Multiple Select Options and CSS Float Styling in Mozilla Firefox

Issue with Webpack throwing 'window undefined' persists despite using the 'use client' configuration in React/Next.js

What is the best way to center text within an input field?

What is the proper way to retrieve an object from a json file?

The issue of the menu in the <Select /> component unexpectedly closing is caused by the MaterialUI -withStyles higher-order component (HOC)

Establish a many-to-many relationship in Prisma where one of the fields is sourced from a separate table

The argument type does not match the parameter type partial<>

What causes the behavior of <body> backgrounds to differ from that of other HTML elements?

There seems to be an issue with the functionality of Array.filter when trying to use it with arrays

Is it possible for us to perform an addition operation on two or more items that belong to the same

Stopping navigation in Vue router