CODE Example:Enfold Portfolio different onhover effects

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.jpg

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 years, 10 months ago by Pixelbits. Reason: example image effect added