Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #214333

    I was looking for a different onhover effect for the Enfold portfolio. With the help of some Googling I changed the arrow to a slideover-excerpt-text effect.

    To change this you have to know how to code – preferably in a child theme that you can download here:http://bit.ly/enfold-child

    Example of onhover effect:
    http://i40.tinypic.com/ndvqpz.jpgimage effect example

    What did i change:
    PORTFOLIO.PHP (Version: 2.4.5)

    New code:
    somewhere from line 395 (fullwidth portfolio) I changed some settings and added some classes. This is not very clean code but it can help you achieve this very easily.

    else
                    {
                        $extraClass .= ' default_av_fullwidth ';
    
                        $output .= "<div data-ajax-id='{$the_id}' class=' rozepitem grid-entry flex_column isotope-item all_sort {$style_class} {$post_class} {$sort_class} {$grid} {$extraClass}'>";
    	                $output .= !empty($excerpt) ? "<a href='{$title_link}' title='".esc_attr(strip_tags($title))."'><div class='rozeptxt grid-entry-excerpt entry-content' ".avia_markup_helper(array('context'=>'entry_content','echo'=>false)).">".$excerpt."</div></a>" : '';
        
                        $output .= "<article class='main_color inner-entry' ".avia_markup_helper(array('context' => 'entry','echo'=>false)).">";
    					
                        $output .= apply_filters('avf_portfolio_extra', "", $entry);
                        $output .= "<".$link_markup[0]." data-rel='grid-".avia_post_grid::$grid."' class='grid-image avia-hover-fx'>".$custom_overlay.get_the_post_thumbnail( $the_id, $image_size )."</".$link_markup[1].">";
                        $output .= !empty($title) || !empty($excerpt) ? "<div style='z-index:100;box-shadow: 0px -5px 20px #888888;' class='grid-content'><div class='avia-arrow'></div>" : '';
    
                        if(!empty($title))
                        {
                            $markup = avia_markup_helper(array('context' => 'entry_title','echo'=>false));
                            $output .= '<header style="z-index:100;" class="entry-content-header">';
                            $output .= "<h3 class='grid-entry-title entry-title' $markup><a href='{$title_link}' title='".esc_attr(strip_tags($title))."'>".$title."</a></h3>";
                            $output .= '</header>';
                        }
                        $output .= !empty($title) || !empty($excerpt) ? "</div>" : '';
                        $output .= '<footer class="entry-footer"></footer>';
                        $output .= "</article>";
                        $output .= "</div>";
                    }
    
    				$loop_counter ++;
    				$post_loop_count ++;
    				$extraClass = "";
    
    				if($loop_counter > $columns)
    				{
    					$loop_counter = 1;
    					$extraClass = 'first';
    				}
    			}

    Then i added a jQuery part in a JS file (e.g. shortcodes.js):

    $('.rozeptxt').animate({
          opacity:'0',
          top:'300px',
        });
    
    $('.rozepitem').hover(  
      // Over
      function(){     
    	$(this).find('.rozeptxt').animate({
          opacity:'0.9',
          top:'0px',
        });
    
      }
      ,  
      // Out
      function(){
    	$(this).find('.rozeptxt').animate({
          opacity:'0',
          top:'300px',
        });
    
      }
    );
    

    In the custom CSS-field I added this:

    
    .image-overlay { display: none!important; } 
    
    .entry-title {font-weight:bold;font-size:13pt;}
    
    .rozeptxt{color:#7c6853;font-size:13pt;position: absolute;top:0px;left:0px;
        background: rgba(255,255,255,0.9);width: 100%;height: 100%;z-index:50;padding:20px;}
    
    .rozepitem{display: block;float: left;
        position: relative;overflow:hidden;}
    

    I know the code can be a lot cleaner, but i saw other people wanting this – so maybe this helps them create something awesome.

    • This topic was modified 10 months, 4 weeks ago by  Pixelbits. Reason: example image effect added
    #214448

    Hey Pixelbits!

    Thanks for sharing! :)

    Best regards,
    Yigit

Viewing 2 posts - 1 through 2 (of 2 total)

The topic ‘CODE Example:Enfold Portfolio different onhover effects’ is closed to new replies.