Text when hovering over employee picture

Hello there,

I’d like to be able to write something about each employee in the red box that appears when you hover over the picture.

Is this possible?

Many thanks,
Katy

Hello there,

It’s possible. The easiest way is to use jQuery code approach. Please try doing the below steps:

  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($) {

   'use strict'

   if( $('.roll-team').length ){

    $('.roll-team .team-item').each(function(){

      var name      = $(this).children('.team-content').children('.name');
      var teamName  = $.trim(name.text());
      var text      = '';

      // New team extra text HTML  
      var extraText = function(text){

          var html = '<div class="team-additional-text">'+text+'</div>';

          return html;
          
      }

      // Extra text for Chris Donovan
      if(teamName == 'Chris Donovan'){
        text = 'This is an additional text for Chris Donovan';
      }  

      // Extra text for Margaret Jones
      if(teamName == 'Margaret Jones'){
        text = 'This is an additional text for Margaret Jones';
      }        

      // Insert new text into overlay block
      $(this).find('.team-social').append(extraText(text));
      
    });
   
   }

})(jQuery);

In the code above, the extra text for each employee is defined with this code:


// Extra text for Chris Donovan
if(teamName == 'Chris Donovan'){
  text = 'This is an additional text for Chris Donovan';
}  

// Extra text for Margaret Jones
if(teamName == 'Margaret Jones'){
  text = 'This is an additional text for Margaret Jones';
}        

You’ll need to adjust the team names to match with yours and supply the text in the text variable.

  1. Update
  2. Add this extra CSS code to Appearance > Customize > Additional CSS box to vertically center the red overlay content.

.roll-team .team-item .team-pop .team-info {
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);  
}  

.team-additional-text {
  margin-top: 10px;
}

Once you’re done you’d clear all site caches (if applied). Otherwise, nothing will take affect.

Regards,
Kharis

Hi Kharis,
is it also possible to insert the excerpt-text instead of hard-code the text?
Would be better, so the text is editable outside of the code and so also for non-coders?

Thanks

Hi Kharis.

Any suggestion?

Regards,
Jörg

Hi Jörg,

I am sorry, currently there is no setting for that scenario.

Regards,
Kharis
aThemes Support