Employee photo: Change Picture on hover / mouseover

Hi Guys!
We’re interested in buying the Sydney Pro theme and would like to know if the following is possible upfront:

Description (Employee Widget):
The user hovers over the employee photo and the photo not only gets a transparent overlay with name and social media links, but also sees a second (funnier) photo of the same employee (behind the overlay with all the data).

We tried to solve it by uploading those two photos as one (on top of each other) but unfortunately the upload crops it automatically.

Any ideas how to solve that?
Thanks in advance!

Cheers,
CHRIS

Hello there,

Thank you for your interest!

Accomplishing that result is very easy with Sydney Pro. In the below steps, we use a couple of jQuery code to alter new image upon mouseover.

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
    (function($){

      $.fn.addEmployeeImage = function(e) {

        this.each(function(){

          var i = $.extend({
                  name: "",
                  newImage: "",
              }, e),
              name    = $(this).children('.team-content').children('.name'),
              nameA   = $(this).children('.team-content').children('.name').children('a'),
              tName   = $.trim(name.text()),
              avatar  = $(this).children('.team-inner').children('.avatar'),
              avatarImg = avatar.children('img:first');

          if( nameA.length ) {
            tName = $.trim(nameA.text());
          }

          if( tName == i.name ) {
            avatar.addClass('has-new-image');
            avatarImg.removeAttr('srcset');
            avatarImg.clone().appendTo(avatar);
            avatarImg.attr('src', i.newImage).addClass('employee-img-2');
          }

        });

      }; // Function ends

      // Set new image
      $('.roll-team .team-item').addEmployeeImage({
        name: "Billy Richards",
        newImage: "http://yoursite.com/employee-image-2.jpg"
      });

    })(jQuery);

In the code above, the new image for target employee which’s identified by name defined in this code block:

      $('.roll-team .team-item').addEmployeeImage({
        name: "Billy Richards",
        newImage: "http://yoursite.com/employee-image-2.jpg"
      });

Name must be match and new the image URL path should be valid. You can upload it to your site’s media library (Dashboard > Media > Add New).

  1. Update
  2. Then add the below CSS code to Appearance > Customize > Additional CSS from dashboard.
    .roll-team .team-item:hover .avatar.has-new-image::after{
      opacity: 0.1 !important;
    }

    .roll-team .avatar.has-new-image img.employee-img-2,
    .roll-team .team-item:hover .avatar.has-new-image img {
      display: none;
    }

    .roll-team .team-item:hover .avatar.has-new-image img.employee-img-2 {
      display: block;
    }

Before running a test to see the result, clear any applied cache. https://codex.wordpress.org/I_Make_Changes_and_Nothing_Happens

If everything goes right, you’d see something like this:

Regards,
Kharis