Okay
  Public Ticket #459170
Portfolio Item Hover
Closed

Comments

  • Nick started the conversation
    June 16, 2015 at 10:39pm

    I have two inquiries:

    1. How can I edit the opacities of the portfolio item hovers.
      • I saw the post here: https://themenectar.ticksy.com/ticket/234150
      • I am trying to edit //style 3 (which is title overlaid with zoom effect).
      • I would like to make it so there is no color overlay - just the "zoom effect". I was able to change the opacity of the hover - however, the initial state when the page loads has a color overlay. When you hover - the color overlay will be removed - and it will not come back (until you refresh the page again). I cannot seem to find the initial state for this color overlay to get rid of it. Can you help?
    2. How can I edit this .js file in the child theme so I can update the main file when needed?
      • I saw this post here: https://themenectar.ticksy.com/ticket/136919/
      • I am still a bit confused on how to do this. Do I paste the entire code from the link above into my functions.php?
      • Then What code from the opacity overlay do I need to paste & and where within the code from above?
      • Do I paste all of this:
      • //style 3
        $('.portfolio-items .col .work-item.style-3').hover(function(){
        $(this).find('.work-info .vert-center').stop().animate({
        'top' : '-' + $(this).find('.work-info .vert-center p').height() +'px'
        },350,'easeOutCubic');
        $(this).find('.work-info .vert-center *').stop().animate({
        'opacity' : 1
        },350,'easeOutCubic');
        $(this).find('.work-info .vert-center p').stop().animate({
        'margin-top' : '0px',
        'opacity' : 1
        },350,'easeOutCubic');
        $(this).find('.work-info-bg').stop(true).animate({
        'opacity' : 0
        },350,'swing');
        },function(){
        $(this).find('.work-info .vert-center').stop().animate({
        'top' : '0'
        },350,'easeOutCubic');
        $(this).find('.work-info .vert-center *').stop().animate({
        'opacity' : 0
        },350,'easeOutCubic');
        $(this).find('.work-info .vert-center p').stop().animate({
        'margin-top' : '-'+$(this).find('.work-info .vert-center p').height()*1.5+'px',
        'opacity' : 0
        },350,'easeOutCubic');
        $(this).find('.work-info-bg').stop(true).animate({
        'opacity' : 0.45
        },350,'swing');
        });

    Thank you.

  •  1,076
    ThemeNectar replied
    June 22, 2015 at 6:27am

    Hey,

    1. Add this into the custom css box in the Salient options panel: 

    .portfolio-items .col .work-item.style-3 .work-info-bg {
  opacity: 0!important;
}
    2. You\'d need to enqueue the init.js file in your child theme instead. Use this snippet in your child theme functions.php 
    // Override a javascript script in the main theme with the one in my child theme

add_action( \'wp_enqueue_scripts\', \'javascript_init_script_fix\', 20 );
function javascript_init_script_fix() {
    wp_dequeue_script( \'nectarFrontend\' );
    wp_enqueue_script( \'salient-child\', get_stylesheet_directory_uri() . \'/js/init.js\', array( \'jquery\' ) );
}
    and then simply create a js folder in your child theme and add an init.js file