Tagged: 

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • February 21, 2018 at 1:36 am #915131
    ewoodson2

    Hi,

    I’m creating a team page & would like to change the image on hover like: https://www.shootproof.com/about/team
    What would be the easiest way to accomplish this? A plugin would be great because I have limited experience changing, but will try if I need to.

    Thanks!

    February 21, 2018 at 5:55 am #915272
    Nikko

    Hey ewoodson2,

    I’m not sure if there are plugins that offers this but I think you can try to search for it. Enfold, doesn’t have that feature, but we can try to assist/help you by giving you css codes that should help achieve the same thing. Can you post a link to your team page? so we can have a closer look. You can post the link in private content if you want it to be seen only by moderators.

    Best regards,
    Nikko

    February 21, 2018 at 6:40 am #915308
    ewoodson2

    When I have one on the page the rollover works. But when I add multiples and use the same code, it doesn’t work

    February 21, 2018 at 2:13 pm #915447
    Victoria

    Hi ewoodson2,

    Here are some threads to consider:
    https://kriesi.at/support/topic/change-image-on-mouseover/
    https://kriesi.at/support/topic/enfold-portfolio-ajax-change-portfolio-grid-images-on-hover/#post-313590

    Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?

    If you need further assistance please let us know.
    Best regards,
    Victoria

    February 21, 2018 at 4:02 pm #915537
    ewoodson2

    I’ve addedd that info

    February 21, 2018 at 8:46 pm #915688
    Basilis

    Hi,

    Please follow the Guide Victoria has provided and if you stuck somewhere we will be happy to help more.
    But you need to start, as doing it from zero is not part of our support policy :)

    Thank you very much

    Best regards,
    Basilis

    July 4, 2019 at 5:07 pm #1115841
    vgsystems

    Hi,

    For those who wants to add a hover image for team members, we add this functionality to native Enfold’s component.

    You have to add team.php to Enfold’s child theme inside shortcodes folder: /enfold-child/shortcodes/team.php

    Gist file: https://gist.github.com/vgsystems/a9ba12929dc043a4ed229cc604cd7e12

    If you don’t know how to enable shortcodes folder, pleas check this forum.

    Best regards,

    July 5, 2019 at 10:17 am #1116000
    Vinay

    Hi,

    Thank you for sharing your solution.

    Let us know if this works for others with a similar issue. If you need any further assistance please feel free to contact us.

    Best regards,
    Vinay

    October 5, 2019 at 4:17 pm #1145304
    marco3253

    thank you for this great hack, I uploaded the team.php into my enfold-child/shortcodes/ folder, but looks like the file is not being loaded cause I cannot see the differences in the admin side of the team elements.
    I cleaned cache and files of the browser…
    any suggestions?

    October 5, 2019 at 10:25 pm #1145392
    Mike

    Hi,
    Typically after you add the file to enfold-child/shortcodes/ folder you would need to add this code to your functions.php:

    function avia_include_shortcode_template($paths)
{
	$template_url = get_stylesheet_directory();
    	array_unshift($paths, $template_url.'/shortcodes/');

	return $paths;
}
add_filter('avia_load_shortcodes', 'avia_include_shortcode_template', 15, 1);

    But this is not working for me. We recently made some changes which may have broken this add-on.
    I recommend using css like this:

    .team-img-container:hover img {
  opacity: 0 !important; 
  transition: opacity .5s linear !important; 
  }
  .team-img-container {
  background: url('https://test.kriesi.at/enfold-2017/wp-content/uploads/sites/24/2017/02/people-2.jpg') !important;
  background-size: contain !important; 
  }

    via GIPHY

    Naturally, you will need to add a custom class to each team member and adjust the code so they can have a different hover image.

    Best regards,
    Mike

    October 7, 2019 at 9:28 am #1145692
    marco3253

    Thank you Mike for your feedback, I added the team.php into the main enfold folder for now (I mean not the child theme) and it’s working.
    I will try to use the function.php edit + child let’s see if for me work.

    There is no way i’m going to add more thant 40s custom class for each members :)

    October 8, 2019 at 5:49 am #1146004
    Mike

    Hi,
    Glad to hear this is working for you, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘change image on hover’ is closed to new replies.