Hi Yigit, sorry but I already tried that way but it didn’t work. I try to duplicate here what I did so you can correct me where I was wrong.

In my enfold-child theme I created the following directories

child-theme/includes/gnmenu-walker.php
child-theme/includes/helper-main-menu-php
child-theme/fucntions.php

File gnmenu-walker.php

<?php
// Custom Walker Class for Bootstrap Menu
add_action( 'after_setup_theme', 'gnmenu_setup' );
 
if ( ! function_exists( 'gnmenu_setup' ) ):
 
	function gnmenu_setup(){
 
		class GnMenu_Walker_Nav_Menu extends Walker_Nav_Menu {
 
 
			function start_lvl( &$output, $depth = 0, $args = array() ) {
 
				$indent = str_repeat( "\t", $depth );
				$output	   .= "\n$indent<ul class=\"gn-submenu\">\n";
 
			}
 
			function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
 
				$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
 
				$li_attributes = '';
				$class_names = $value = '';
 
				$classes = empty( $item->classes ) ? array() : (array) $item->classes;
				$classes[] = ($args->has_children) ? 'gn-submenu' : '';
				$classes[] = ($item->current || $item->current_item_ancestor) ? 'active' : '';
				$classes[] = 'menu-item-' . $item->ID;
 
 
				$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
				$class_names = ' class="' . esc_attr( $class_names ) . '"';
 
				$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
				$id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';
 
				$output .= $indent . '<li' . $id . $value . $class_names . $li_attributes . '>';
 				
 				$iconClasses ='';
				if ($item->ID == 1265)
				{
					$iconClasses = 'gn-icon-home';
				}
				elseif ($item->ID == 1266)
				{
					$iconClasses = 'gn-icon-cog';
				}
				elseif ($item->ID == 1267)
				{
					$iconClasses = 'gn-icon-about';
				}
				elseif ($item->ID == 1273)
				{
					$iconClasses = 'gn-icon-portfolio';
				}
				elseif ($item->ID == 1274)
				{
					$iconClasses = 'gn-icon-marble';
				}
				elseif ($item->ID == 1275)
				{
					$iconClasses = 'gn-icon-wood';
				}
				elseif ($item->ID == 1276)
				{
					$iconClasses = 'gn-icon-meta';
				}
				elseif ($item->ID == 1282)
				{
					$iconClasses = 'gn-icon-design';
				}
				;

				$attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
				//$attributes .= ' class="gn-icon gn-icon-download"'; 
				$attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
				$attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
				$attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';
				//$attributes .= ($args->has_children) 	    ? ' class="dropdown-toggle" data-toggle="dropdown"' : '';
				//$attributes .= ' class="gn-icon gn-icon-download ' . ( $depth > 0 ? 'sub-menu-link' : 'main-menu-link' ) . '"';
 				$attributes .= ' class= "gn-icon ' . $iconClasses . '"';

				$item_output = $args->before;
				$item_output .= '<a'. $attributes .'>';
				$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
				$item_output .= ($args->has_children) ? ' <b class="caret"></b></a>' : '</a>';
				$item_output .= $args->after;
 
				$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
			}
 
			function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ) {
 
				if ( !$element )
					return;
 
				$id_field = $this->db_fields['id'];
 
				//display this element
				if ( is_array( $args[0] ) ) 
					$args[0]['has_children'] = ! empty( $children_elements[$element->$id_field] );
				else if ( is_object( $args[0] ) ) 
					$args[0]->has_children = ! empty( $children_elements[$element->$id_field] ); 
				$cb_args = array_merge( array(&$output, $element, $depth), $args);
				call_user_func_array(array(&$this, 'start_el'), $cb_args);
 
				$id = $element->$id_field;
 
				// descend only when the depth is right and there are childrens for this element
				if ( ($max_depth == 0 || $max_depth > $depth+1 ) && isset( $children_elements[$id]) ) {
 
					foreach( $children_elements[ $id ] as $child ){
 
						if ( !isset($newlevel) ) {
							$newlevel = true;
							//start the child delimiter
							$cb_args = array_merge( array(&$output, $depth), $args);
							call_user_func_array(array(&$this, 'start_lvl'), $cb_args);
						}
						$this->display_element( $child, $children_elements, $max_depth, $depth + 1, $args, $output );
					}
						unset( $children_elements[ $id ] );
				}
 
				if ( isset($newlevel) && $newlevel ){
					//end the child delimiter
					$cb_args = array_merge( array(&$output, $depth), $args);
					call_user_func_array(array(&$this, 'end_lvl'), $cb_args);
				}
 
				//end this element
				$cb_args = array_merge( array(&$output, $element, $depth), $args);
				call_user_func_array(array(&$this, 'end_el'), $cb_args);
 
			}
 
		}
 
	}
 
endif;

FILE helper-main-menu.php

<?php 
global $avia_config;

$responsive		= avia_get_option('responsive_active') != "disabled" ? "responsive" : "fixed_layout";
$headerS 		= avia_header_setting();
$social_args 	= array('outside'=>'ul', 'inside'=>'li', 'append' => '');
$icons 			= !empty($headerS['header_social']) ? avia_social_media_icons($social_args, false) : "";

if(isset($headerS['disabled'])) return;

?>

<header id='header' class='all_colors header_color <?php avia_is_dark_bg('header_color'); echo " ".$headerS['header_class']; ?>' <?php avia_markup_helper(array('context' => 'header','post_type'=>'forum'));?>>

<?php

if($responsive)
{
	echo '<a id="advanced_menu_toggle" href="#" '.av_icon_string('mobile_menu').'></a>';
	echo '<a id="advanced_menu_hide" href="#" 	'.av_icon_string('close').'></a>';
}

//subheader, only display when the user chooses a social header
if($headerS['header_topbar'] == true)
{
?>
		<div id='header_meta' class='container_wrap container_wrap_meta <?php echo avia_header_class_string(array('header_social', 'header_secondary_menu', 'header_phone_active'), 'av_'); ?>'>
		
			      <div class='container'>
			      <?php
			            /*
			            *	display the themes social media icons, defined in the wordpress backend
			            *   the avia_social_media_icons function is located in includes/helper-social-media-php
			            */
						$nav = "";
						
						//display icons
			            if(strpos( $headerS['header_social'], 'extra_header_active') !== false) echo $icons;
					
						//display navigation
						if(strpos( $headerS['header_secondary_menu'], 'extra_header_active') !== false )
						{
			            	//display the small submenu
			                $avia_theme_location = 'avia2';
			                $avia_menu_class = $avia_theme_location . '-menu';
			                $args = array(
			                    'theme_location'=>$avia_theme_location,
			                    'menu_id' =>$avia_menu_class,
			                    'container_class' =>$avia_menu_class,
			                    'fallback_cb' => '',
			                    'container'=>'',
			                    'echo' =>false
			                );
			                
			                $nav = wp_nav_menu($args);
						}
			                
						if(!empty($nav) || apply_filters('avf_execute_avia_meta_header', false))
						{
							echo "<nav class='sub_menu' ".avia_markup_helper(array('context' => 'nav', 'echo' => false)).">";
							echo $nav;
		                    do_action('avia_meta_header'); // Hook that can be used for plugins and theme extensions (currently: the wpml language selector)
							echo '</nav>';
						}
						
						
						//phone/info text	
						$phone			= $headerS['header_phone_active'] != "" ? $headerS['phone'] : "";
						$phone_class 	= !empty($nav) ? "with_nav" : "";
						if($phone) 		{ echo "<div class='phone-info {$phone_class}'><span>".do_shortcode($phone)."</span></div>"; }
							
							
			        ?>
			      </div>
		</div>

<?php } 
	
	
	
	$output 	 = "";
	$temp_output = "";
	$icon_beside = "";
	
	if($headerS['header_social'] == 'icon_active_main' && empty($headerS['bottom_menu']))
	{
		$icon_beside = " av_menu_icon_beside"; 
	}
	
	
	
	
	
	
?>
		<div  id='header_main' class='container_wrap container_wrap_logo'>
	
        <?php
        /*
        * Hook that can be used for plugins and theme extensions (currently:  the woocommerce shopping cart)
        */
        do_action('ava_main_header');
        
        if($headerS['header_position'] != "header_top") do_action('ava_main_header_sidebar');
		

		if( function_exists( 'gnmenu_setup' ) ){
			   
			    $output.="<div class='container-menu'>
						<ul id='gn-menu' class='gn-menu-main'>
							<li class='gn-trigger'>
								<a class='gn-icon gn-icon-menu'><span>Menu</span></a>
								<nav class='gn-menu-wrapper'>
									<div class='gn-scroller'>";

									$args = array(
									'theme_location' => $avia_theme_location,
									'depth'      => 2,
									'container'  => false,
									'menu_class'     => ' gn-menu',
									'walker'     => new GnMenu_Walker_Nav_Menu()
									);
			 
								if (has_nav_menu('menu-1')) {
									wp_nav_menu($args);
								}
			 	$output.= "</div><!-- /gn-scroller -->	</nav></li><li><a href=' " . echo esc_url( home_url( '/' ) ); . " ' title= ' ". bloginfo( 'name' ) . " ' rel='homepage'> " .  bloginfo( 'name' ) . "</a></li>

								<li><a class='codrops-icon codrops-icon-drop' href='#''><span>Back to the Codrops Article</span></a></li>
							</ul>
						</div><!-- /container -->"
								
			}
			else{

				 $output .= "<div class='container av-logo-container'>";
				 
					$output .= "<div class='inner-container'>";
						
						/*
						*	display the theme logo by checking if the default logo was overwritten in the backend.
						*   the function is located at framework/php/function-set-avia-frontend-functions.php in case you need to edit the output
						*/
						$addition = false;
						if( !empty($headerS['header_transparency']) && !empty($headerS['header_replacement_logo']) )
						{
							$addition = "<img src='".$headerS['header_replacement_logo']."' class='alternate' alt='' title='' />";
						}
						
						$output .= avia_logo(AVIA_BASE_URL.'images/layout/logo.png', $addition, 'span', true);
						
							if(!empty($headerS['bottom_menu']))
							{
								ob_start();
								do_action('ava_before_bottom_main_menu'); // todo: replace action with filter, might break user customizations
								$output .= ob_get_clean();
							}
							
						    if($headerS['header_social'] == 'icon_active_main' && !empty($headerS['bottom_menu']))
						    {
							    $output .= $icons;
						    }
						    
						
						/*
						*	display the main navigation menu
						*   modify the output in your wordpress admin backend at appearance->menus
						*/
						    
						    if($headerS['bottom_menu'])
						    { 
							    $output .= "</div>";  
								$output .= "</div>";
								
								if( !empty( $headerS['header_menu_above'] ))
								{
									$avia_config['temp_logo_container'] = "<div class='av-section-bottom-logo header_color'>".$output."</div>";
									$output = "";
								}
								
								$output .= "<div id='header_main_alternate' class='container_wrap'>";
								$output .= "<div class='container'>";
							}
						
							
							    $output .= "<nav class='main_menu' data-selectname='".__('Select a page','avia_framework')."' ".avia_markup_helper(array('context' => 'nav', 'echo' => false)).">";
							        $avia_theme_location = 'avia';
							        $avia_menu_class = $avia_theme_location . '-menu';
							        $args = array(
							            'theme_location'	=> $avia_theme_location,
							            'menu_id' 			=> $avia_menu_class,
							            'menu_class'		=> 'menu av-main-nav',
							            'container_class'	=> $avia_menu_class.' av-main-nav-wrap'.$icon_beside,
							            'fallback_cb' 		=> 'avia_fallback_menu',
							            'echo' 				=>	false, 
							            'walker' 			=> new avia_responsive_mega_menu()
							        );
							
							        $main_nav = wp_nav_menu($args);
							        $output .= $main_nav;
							        
							      
								    /*
								    * Hook that can be used for plugins and theme extensions
								    */
								    ob_start();
								    do_action('ava_inside_main_menu'); // todo: replace action with filter, might break user customizations
								    $output .= ob_get_clean();
								    
								    if($icon_beside)
								    {
									    $output .= $icons; 
								    }
								        
								    $output .= '</nav>';
								
								    /*
								    * Hook that can be used for plugins and theme extensions
								    */
								    ob_start();
								    do_action('ava_after_main_menu'); // todo: replace action with filter, might break user customizations
									$output .= ob_get_clean();
							
				
					 /* inner-container */
			        $output .= "</div>";
						
		        /* end container */
		        $output .= " </div> ";
		   		
		   		}

		   		//output the whole menu     
		        echo $output; 
		        
		        
		   ?>

		<!-- end container_wrap-->
		</div>
		
		<div class='header_bg'></div>

<!-- end header -->
</header>

FILE functions.php

/**
 * Load GnMenu.
 */
require get_template_directory() . '/includes/gnmenu-walker.php';

Actually I also tried to simplify the helper-main-menu.php, by deleting everything and adding only the core part I am interested in that is the one reported in my first question, but still didn’t work:

Thanks for any help you could provide

Dear Andy

“I copied all your content into my own installation to reproduce the issue on my end, but it doesn’t happen for me on my end. So something must cause it especially on your end. Please remove your child theme and any other customization you’ve done so far, as well as deactivate all your plugins, to check if one of those things are causing the issue. Also have in mind that maybe it’s just a caching issue on your end. So switch off any caching you’re using, clear browser cache and hard refresh a few times.”

All this we did several times before. I believe sometimes this issues are caused by other systems. But even with all deactivated plugins, except woocommerce, and deleted custom css and child-theme the product-slider behaviour stays the same. Also as I see the forum we are not the only ones with this problem or very similar problems.

–>https://kriesi.at/support/topic/product-slider-problem-2/

css of the second slide looks like this –> class is .products slide-entry-wrap

<ul class="products slide-entry-wrap" style="visibility: hidden; opacity: 0; transition: none; transform: translateZ(0px); z-index: 2;"><li class="post-907 product type-product status-publish has-post-thumbnail product_cat-rfid-tag product_tag-auto-id product_tag-rfid-identifizierung product_tag-rfid-objektkennzeichnung product_tag-rfid-tag product_tag-rfid-technologie product_tag-rfid-transponder product_tag-uhf pa_anwendungsbereich-auftragsidentifikation pa_anwendungsbereich-produktkennzeichnung pa_anwendungsbereich-werkzeugkennzeichnung pa_befestigungsart-aufkleben pa_betriebstempbereich_maximum-439 pa_betriebstempbereich_minimum-_25 pa_betriebstemperatur_maximum-320 pa_betriebstemperatur_minimum-_25 pa_breite-302 pa_chip_typ-nxp_i_code_sli pa_form-rechteck pa_hoehe-2_5 pa_laenge-267 pa_lagertempbereich_maximum-442 pa_lagertempbereich_minimum-_30 pa_lagertempbereich_minimum-_60 pa_lagertemperatur_maximum-189 pa_lagertemperatur_minimum-_40 pa_rfid_frequenz-uhf pa_untergrund-esd pa_untergrund-glas pa_untergrund-kunststoff pa_untergrund-pappe first instock shipping-taxable product-type-simple">
	<div class="inner_product main_color wrapped_style noLightbox  av-product-class-"><a href="http://rfid-finder.com/produkt/rfid-tag-lm1000-uhf/" class="woocommerce-LoopProduct-link"><div class="thumbnail_container"><img width="450" height="450" src="http://rfid-finder.com/wp-content/uploads/2016/05/1000-450x450.jpg" class="attachment-shop_catalog size-shop_catalog wp-post-image" alt="RFID-Tag LM1000 UHF" srcset="http://rfid-finder.com/wp-content/uploads/2016/05/1000-450x450.jpg 450w, http://rfid-finder.com/wp-content/uploads/2016/05/1000-80x80.jpg 80w, http://rfid-finder.com/wp-content/uploads/2016/05/1000-300x300.jpg 300w, http://rfid-finder.com/wp-content/uploads/2016/05/1000-36x36.jpg 36w, http://rfid-finder.com/wp-content/uploads/2016/05/1000-180x180.jpg 180w, http://rfid-finder.com/wp-content/uploads/2016/05/1000-120x120.jpg 120w, http://rfid-finder.com/wp-content/uploads/2016/05/1000.jpg 600w" sizes="(max-width: 450px) 100vw, 450px" style="left: 0px;"><span class="cart-loading"></span></div><div class="inner_product_header"><div class="avia-arrow"></div><div class="inner_product_header_table"><div class="inner_product_header_cell"><h2 class="woocommerce-loop-product__title">RFID-Tag LM1000 UHF</h2>
</div></div></div></a><div class="avia_cart_buttons "><a rel="nofollow" href="http://rfid-finder.com/produkt/rfid-tag-lm1000-uhf/" data-quantity="1" data-product_id="907" data-product_sku="LM1000-ST" class="button product_type_simple ajax_add_to_cart"><span aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span> Weiterlesen</a><a class="button show_details_button" href="http://rfid-finder.com/produkt/rfid-tag-lm1000-uhf/"><span aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span>  Zeige Details</a> <span class="button-mini-delimiter"></span></div></div></li>
<li class="post-914 product type-product status-publish has-post-thumbnail product_cat-rfid-tag product_tag-auto-id product_tag-rfid-identifizierung product_tag-rfid-objektkennzeichnung product_tag-rfid-tag product_tag-rfid-technologie product_tag-rfid-transponder product_tag-uhf pa_anwendungsbereich-auftragsidentifikation pa_anwendungsbereich-c_teile_management pa_anwendungsbereich-materialflussverfolgung pa_anwendungsbereich-produktkennzeichnung pa_anwendungsbereich-werkzeugkennzeichnung pa_bedruckbare_oberflaeche-seriennummer pa_befestigungsart-aufkleben pa_betriebstempbereich_maximum-439 pa_betriebstempbereich_minimum-_25 pa_betriebstemperatur_maximum-446 pa_betriebstemperatur_minimum-_25 pa_breite-302 pa_chip_typ-impinj_monza_4 pa_epc_memory-96_bits_480_bits pa_form-rechteck pa_hoehe-2_5 pa_laenge-264 pa_lagertempbereich_maximum-442 pa_lagertempbereich_minimum-_30 pa_lagertempbereich_minimum-_60 pa_lagertemperatur_maximum-189 pa_lagertemperatur_minimum-_40 pa_rfid_frequenz-uhf pa_untergrund-esd pa_untergrund-glas pa_untergrund-kunststoff pa_untergrund-pappe pa_user_memory-512_bits  instock shipping-taxable product-type-simple">
	<div class="inner_product main_color wrapped_style noLightbox  av-product-class-"><a href="http://rfid-finder.com/produkt/rfid-tag-lm1001-uhf-bedruckbar/" class="woocommerce-LoopProduct-link"><div class="thumbnail_container"><img width="450" height="450" src="http://rfid-finder.com/wp-content/uploads/2016/05/1001-450x450.jpg" class="attachment-shop_catalog size-shop_catalog wp-post-image" alt="RFID-Tag LM1001 UHF bedruckbar" srcset="http://rfid-finder.com/wp-content/uploads/2016/05/1001-450x450.jpg 450w, http://rfid-finder.com/wp-content/uploads/2016/05/1001-80x80.jpg 80w, http://rfid-finder.com/wp-content/uploads/2016/05/1001-300x300.jpg 300w, http://rfid-finder.com/wp-content/uploads/2016/05/1001-36x36.jpg 36w, http://rfid-finder.com/wp-content/uploads/2016/05/1001-180x180.jpg 180w, http://rfid-finder.com/wp-content/uploads/2016/05/1001-120x120.jpg 120w, http://rfid-finder.com/wp-content/uploads/2016/05/1001.jpg 600w" sizes="(max-width: 450px) 100vw, 450px" style="left: 0px;"><span class="cart-loading"></span></div><div class="inner_product_header"><div class="avia-arrow"></div><div class="inner_product_header_table"><div class="inner_product_header_cell"><h2 class="woocommerce-loop-product__title">RFID-Tag LM1001 UHF bedruckbar</h2>
</div></div></div></a><div class="avia_cart_buttons "><a rel="nofollow" href="http://rfid-finder.com/produkt/rfid-tag-lm1001-uhf-bedruckbar/" data-quantity="1" data-product_id="914" data-product_sku="LM1001-ST" class="button product_type_simple ajax_add_to_cart"><span aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span> Weiterlesen</a><a class="button show_details_button" href="http://rfid-finder.com/produkt/rfid-tag-lm1001-uhf-bedruckbar/"><span aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span>  Zeige Details</a> <span class="button-mini-delimiter"></span></div></div></li>
<li class="post-909 product type-product status-publish has-post-thumbnail product_cat-rfid-tag product_tag-auto-id product_tag-hf product_tag-rfid-identifizierung product_tag-rfid-objektkennzeichnung product_tag-rfid-tag product_tag-rfid-technologie product_tag-rfid-transponder pa_anwendungsbereich-auftragsidentifikation pa_anwendungsbereich-fahrzeugidentifikation pa_anwendungsbereich-ladungstraegeridentifikation pa_anwendungsbereich-maschinen_service pa_anwendungsbereich-materialflussverfolgung pa_anwendungsbereich-produktkennzeichnung pa_anwendungsbereich-werkzeugkennzeichnung pa_bedruckbare_oberflaeche-logo pa_befestigungsart-aufkleben pa_betriebstempbereich_maximum-439 pa_betriebstempbereich_minimum-_25 pa_betriebstemperatur_maximum-446 pa_betriebstemperatur_minimum-_25 pa_breite-299 pa_chip_typ-mifare_1k pa_form-rund pa_hoehe-2_5 pa_laenge-266 pa_lagertempbereich_maximum-442 pa_lagertempbereich_minimum-_30 pa_lagertempbereich_minimum-_60 pa_lagertemperatur_maximum-189 pa_lagertemperatur_minimum-_40 pa_rfid_frequenz-hf pa_untergrund-esd pa_untergrund-glas pa_untergrund-kunststoff pa_untergrund-pappe  instock shipping-taxable product-type-simple">
	<div class="inner_product main_color wrapped_style noLightbox  av-product-class-"><a href="http://rfid-finder.com/produkt/rfid-tag-lm1002-hf-bedruckbar/" class="woocommerce-LoopProduct-link"><div class="thumbnail_container"><img width="450" height="450" src="http://rfid-finder.com/wp-content/uploads/2016/05/1002-450x450.jpg" class="attachment-shop_catalog size-shop_catalog wp-post-image" alt="RFID-Tag LM1002 HF bedruckbar" srcset="http://rfid-finder.com/wp-content/uploads/2016/05/1002-450x450.jpg 450w, http://rfid-finder.com/wp-content/uploads/2016/05/1002-80x80.jpg 80w, http://rfid-finder.com/wp-content/uploads/2016/05/1002-300x300.jpg 300w, http://rfid-finder.com/wp-content/uploads/2016/05/1002-36x36.jpg 36w, http://rfid-finder.com/wp-content/uploads/2016/05/1002-180x180.jpg 180w, http://rfid-finder.com/wp-content/uploads/2016/05/1002-120x120.jpg 120w, http://rfid-finder.com/wp-content/uploads/2016/05/1002.jpg 600w" sizes="(max-width: 450px) 100vw, 450px" style="left: 0px;"><span class="cart-loading"></span></div><div class="inner_product_header"><div class="avia-arrow"></div><div class="inner_product_header_table"><div class="inner_product_header_cell"><h2 class="woocommerce-loop-product__title">RFID-Tag LM1002 HF bedruckbar</h2>
</div></div></div></a><div class="avia_cart_buttons "><a rel="nofollow" href="http://rfid-finder.com/produkt/rfid-tag-lm1002-hf-bedruckbar/" data-quantity="1" data-product_id="909" data-product_sku="LM1002-ST" class="button product_type_simple ajax_add_to_cart"><span aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span> Weiterlesen</a><a class="button show_details_button" href="http://rfid-finder.com/produkt/rfid-tag-lm1002-hf-bedruckbar/"><span aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span>  Zeige Details</a> <span class="button-mini-delimiter"></span></div></div></li>
</ul>

it loads 4 products.

first slide looks like this –> class is .products slide-entry-wrap active-slide

<ul class="products slide-entry-wrap active-slide" style="visibility: visible; opacity: 1; transition: none; transform: translateZ(0px); z-index: 3;"><li class="post-907 product type-product status-publish has-post-thumbnail product_cat-rfid-tag product_tag-auto-id product_tag-rfid-identifizierung product_tag-rfid-objektkennzeichnung product_tag-rfid-tag product_tag-rfid-technologie product_tag-rfid-transponder product_tag-uhf pa_anwendungsbereich-auftragsidentifikation pa_anwendungsbereich-produktkennzeichnung pa_anwendungsbereich-werkzeugkennzeichnung pa_befestigungsart-aufkleben pa_betriebstempbereich_maximum-439 pa_betriebstempbereich_minimum-_25 pa_betriebstemperatur_maximum-320 pa_betriebstemperatur_minimum-_25 pa_breite-302 pa_chip_typ-nxp_i_code_sli pa_form-rechteck pa_hoehe-2_5 pa_laenge-267 pa_lagertempbereich_maximum-442 pa_lagertempbereich_minimum-_30 pa_lagertempbereich_minimum-_60 pa_lagertemperatur_maximum-189 pa_lagertemperatur_minimum-_40 pa_rfid_frequenz-uhf pa_untergrund-esd pa_untergrund-glas pa_untergrund-kunststoff pa_untergrund-pappe first instock shipping-taxable product-type-simple">
	<div class="inner_product main_color wrapped_style noLightbox  av-product-class-"><a href="http://rfid-finder.com/produkt/rfid-tag-lm1000-uhf/" class="woocommerce-LoopProduct-link"><div class="thumbnail_container"><img width="450" height="450" src="http://rfid-finder.com/wp-content/uploads/2016/05/1000-450x450.jpg" class="attachment-shop_catalog size-shop_catalog wp-post-image" alt="RFID-Tag LM1000 UHF" srcset="http://rfid-finder.com/wp-content/uploads/2016/05/1000-450x450.jpg 450w, http://rfid-finder.com/wp-content/uploads/2016/05/1000-80x80.jpg 80w, http://rfid-finder.com/wp-content/uploads/2016/05/1000-300x300.jpg 300w, http://rfid-finder.com/wp-content/uploads/2016/05/1000-36x36.jpg 36w, http://rfid-finder.com/wp-content/uploads/2016/05/1000-180x180.jpg 180w, http://rfid-finder.com/wp-content/uploads/2016/05/1000-120x120.jpg 120w, http://rfid-finder.com/wp-content/uploads/2016/05/1000.jpg 600w" sizes="(max-width: 450px) 100vw, 450px" style="left: 0px;"><span class="cart-loading"></span></div><div class="inner_product_header"><div class="avia-arrow"></div><div class="inner_product_header_table"><div class="inner_product_header_cell"><h2 class="woocommerce-loop-product__title">RFID-Tag LM1000 UHF</h2>
</div></div></div></a><div class="avia_cart_buttons "><a rel="nofollow" href="http://rfid-finder.com/produkt/rfid-tag-lm1000-uhf/" data-quantity="1" data-product_id="907" data-product_sku="LM1000-ST" class="button product_type_simple ajax_add_to_cart"><span aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span> Weiterlesen</a><a class="button show_details_button" href="http://rfid-finder.com/produkt/rfid-tag-lm1000-uhf/"><span aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span>  Zeige Details</a> <span class="button-mini-delimiter"></span></div></div></li>
<li class="post-914 product type-product status-publish has-post-thumbnail product_cat-rfid-tag product_tag-auto-id product_tag-rfid-identifizierung product_tag-rfid-objektkennzeichnung product_tag-rfid-tag product_tag-rfid-technologie product_tag-rfid-transponder product_tag-uhf pa_anwendungsbereich-auftragsidentifikation pa_anwendungsbereich-c_teile_management pa_anwendungsbereich-materialflussverfolgung pa_anwendungsbereich-produktkennzeichnung pa_anwendungsbereich-werkzeugkennzeichnung pa_bedruckbare_oberflaeche-seriennummer pa_befestigungsart-aufkleben pa_betriebstempbereich_maximum-439 pa_betriebstempbereich_minimum-_25 pa_betriebstemperatur_maximum-446 pa_betriebstemperatur_minimum-_25 pa_breite-302 pa_chip_typ-impinj_monza_4 pa_epc_memory-96_bits_480_bits pa_form-rechteck pa_hoehe-2_5 pa_laenge-264 pa_lagertempbereich_maximum-442 pa_lagertempbereich_minimum-_30 pa_lagertempbereich_minimum-_60 pa_lagertemperatur_maximum-189 pa_lagertemperatur_minimum-_40 pa_rfid_frequenz-uhf pa_untergrund-esd pa_untergrund-glas pa_untergrund-kunststoff pa_untergrund-pappe pa_user_memory-512_bits  instock shipping-taxable product-type-simple">
	<div class="inner_product main_color wrapped_style noLightbox  av-product-class-"><a href="http://rfid-finder.com/produkt/rfid-tag-lm1001-uhf-bedruckbar/" class="woocommerce-LoopProduct-link"><div class="thumbnail_container"><img width="450" height="450" src="http://rfid-finder.com/wp-content/uploads/2016/05/1001-450x450.jpg" class="attachment-shop_catalog size-shop_catalog wp-post-image" alt="RFID-Tag LM1001 UHF bedruckbar" srcset="http://rfid-finder.com/wp-content/uploads/2016/05/1001-450x450.jpg 450w, http://rfid-finder.com/wp-content/uploads/2016/05/1001-80x80.jpg 80w, http://rfid-finder.com/wp-content/uploads/2016/05/1001-300x300.jpg 300w, http://rfid-finder.com/wp-content/uploads/2016/05/1001-36x36.jpg 36w, http://rfid-finder.com/wp-content/uploads/2016/05/1001-180x180.jpg 180w, http://rfid-finder.com/wp-content/uploads/2016/05/1001-120x120.jpg 120w, http://rfid-finder.com/wp-content/uploads/2016/05/1001.jpg 600w" sizes="(max-width: 450px) 100vw, 450px" style="left: 0px;"><span class="cart-loading"></span></div><div class="inner_product_header"><div class="avia-arrow"></div><div class="inner_product_header_table"><div class="inner_product_header_cell"><h2 class="woocommerce-loop-product__title">RFID-Tag LM1001 UHF bedruckbar</h2>
</div></div></div></a><div class="avia_cart_buttons "><a rel="nofollow" href="http://rfid-finder.com/produkt/rfid-tag-lm1001-uhf-bedruckbar/" data-quantity="1" data-product_id="914" data-product_sku="LM1001-ST" class="button product_type_simple ajax_add_to_cart"><span aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span> Weiterlesen</a><a class="button show_details_button" href="http://rfid-finder.com/produkt/rfid-tag-lm1001-uhf-bedruckbar/"><span aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span>  Zeige Details</a> <span class="button-mini-delimiter"></span></div></div></li>
<li class="post-909 product type-product status-publish has-post-thumbnail product_cat-rfid-tag product_tag-auto-id product_tag-hf product_tag-rfid-identifizierung product_tag-rfid-objektkennzeichnung product_tag-rfid-tag product_tag-rfid-technologie product_tag-rfid-transponder pa_anwendungsbereich-auftragsidentifikation pa_anwendungsbereich-fahrzeugidentifikation pa_anwendungsbereich-ladungstraegeridentifikation pa_anwendungsbereich-maschinen_service pa_anwendungsbereich-materialflussverfolgung pa_anwendungsbereich-produktkennzeichnung pa_anwendungsbereich-werkzeugkennzeichnung pa_bedruckbare_oberflaeche-logo pa_befestigungsart-aufkleben pa_betriebstempbereich_maximum-439 pa_betriebstempbereich_minimum-_25 pa_betriebstemperatur_maximum-446 pa_betriebstemperatur_minimum-_25 pa_breite-299 pa_chip_typ-mifare_1k pa_form-rund pa_hoehe-2_5 pa_laenge-266 pa_lagertempbereich_maximum-442 pa_lagertempbereich_minimum-_30 pa_lagertempbereich_minimum-_60 pa_lagertemperatur_maximum-189 pa_lagertemperatur_minimum-_40 pa_rfid_frequenz-hf pa_untergrund-esd pa_untergrund-glas pa_untergrund-kunststoff pa_untergrund-pappe  instock shipping-taxable product-type-simple">
	<div class="inner_product main_color wrapped_style noLightbox  av-product-class-"><a href="http://rfid-finder.com/produkt/rfid-tag-lm1002-hf-bedruckbar/" class="woocommerce-LoopProduct-link"><div class="thumbnail_container"><img width="450" height="450" src="http://rfid-finder.com/wp-content/uploads/2016/05/1002-450x450.jpg" class="attachment-shop_catalog size-shop_catalog wp-post-image" alt="RFID-Tag LM1002 HF bedruckbar" srcset="http://rfid-finder.com/wp-content/uploads/2016/05/1002-450x450.jpg 450w, http://rfid-finder.com/wp-content/uploads/2016/05/1002-80x80.jpg 80w, http://rfid-finder.com/wp-content/uploads/2016/05/1002-300x300.jpg 300w, http://rfid-finder.com/wp-content/uploads/2016/05/1002-36x36.jpg 36w, http://rfid-finder.com/wp-content/uploads/2016/05/1002-180x180.jpg 180w, http://rfid-finder.com/wp-content/uploads/2016/05/1002-120x120.jpg 120w, http://rfid-finder.com/wp-content/uploads/2016/05/1002.jpg 600w" sizes="(max-width: 450px) 100vw, 450px" style="left: 0px;"><span class="cart-loading"></span></div><div class="inner_product_header"><div class="avia-arrow"></div><div class="inner_product_header_table"><div class="inner_product_header_cell"><h2 class="woocommerce-loop-product__title">RFID-Tag LM1002 HF bedruckbar</h2>
</div></div></div></a><div class="avia_cart_buttons "><a rel="nofollow" href="http://rfid-finder.com/produkt/rfid-tag-lm1002-hf-bedruckbar/" data-quantity="1" data-product_id="909" data-product_sku="LM1002-ST" class="button product_type_simple ajax_add_to_cart"><span aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span> Weiterlesen</a><a class="button show_details_button" href="http://rfid-finder.com/produkt/rfid-tag-lm1002-hf-bedruckbar/"><span aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span>  Zeige Details</a> <span class="button-mini-delimiter"></span></div></div></li>
</ul>

it loads only 3 products? Somewhere this must be defined. The problem harms only the first slide load, second third, etc. all have four products….

Best regards Marc

• This reply was modified 8 years, 8 months ago by L-mobileGroup.

Thanks Mike,

I still need help on this.

I added this:

“Turn on Custom CSS Class field for all ALB Elements

December 3, 2013/in CSS Snippets, PHP Snippets /by Devin/Last Updated: April 9, 2014
Once enabled, the following function adds a new field to each of your Advanced Layout Builder element’s pop up menu.

First Add this line of PHP to your functions.php file so that the custom class field is enabled:”

add_theme_support('avia_template_builder_custom_css');

In the full width easy slider I added this @media only screen and (min-width: 990px) { .only-mobile { display: none !important; }}

In the video, I added this @media only screen and (max-width: 990px) { .only-desktop { display: none !important; }}

Nothing changed. Thanks for your help on this.

I have been wanting to have more mobile friendly images, etc. for a long time. This will be great once I learn how to do it!

Yo John,

I added a custom class to the image and added that code but it didnt seem to work… Here is what I did:

I added this custom class to the image (screenshot 1)

Than I added this code to the quick CSS (private)

I also have this bit of quick css to hide the old rollover icon. If I remove this the old icon shows.

.avia_image .image-overlay {
    display: none !important;
}

Also when I add the .image-hover-garagedoors css it changes the styling on my page and creates white space on both sides of page. As you can see it moves the side margins in the screenshots.

Let me know how to solve this, I have to make 5 rollover icons. I included a login just in case you need it.

BACK AGAIN

Before i become crazy about that ……
There are so many strange dependencys (H1 in title depending from “Don’t display image on single post” / H1 in Content depending from using ALB or not / H1 in title depending from using ALB or not….) that i have no other idea than to suspect a huge bug.
This is so strange that i cant decide where to begin

Maybe its better to start from scratch.
What i want:
1: using ALB
2: No H1 in Content
3: H1 in title

What do we already got in functions.php

<?php
add_filter('avf_title_args', 'change_title_tag', 10, 2);
function change_title_tag($args,$id)
{
        $args['link'] = get_permalink($id);
        $args['heading'] = 'div';
    return $args;
}
add_filter('avf_title_args', 'fix_single_post_title', 10, 2);
function fix_single_post_title($args,$id)
{
    if ( $args['title'] == 'Blog - Die aktuellsten Neuigkeiten' )
    {
        $args['title'] = get_the_title($id);
        $args['link'] = get_permalink($id);
        $args['heading'] = 'h1';
    }

    return $args;
}
//$avia_config['imgSize']['square-custom'] = array('width'=>300, 'height'=>300); // small image for blogs
//$avia_config['imgSize']['square2'] = array('width'=>400, 'height'=>400); // small image for blogs

function enqueue_parent_theme_style() {
      wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style');

function theme_name_scripts() {
	wp_enqueue_style( 'style-name', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

/* Activate Avia debug mode */
add_action('avia_builder_mode', "builder_set_debug");
function builder_set_debug()
{
	return "debug";
}
/* excerpt lenght */
add_filter('avf_postgrid_excerpt_length','avia_change_postgrid_excerpt_length', 10, 1);
function avia_change_postgrid_excerpt_length($length)
{
   $length = 150;
   return $length;
}

//removes comments from Combo Widget  // 

class avia_combo_widget extends WP_Widget {

		function avia_combo_widget() {
			//Constructor
			$widget_ops = array('classname' => 'avia_combo_widget', 'description' => 'A widget that displays your popular posts, recent posts, recent comments and a tagcloud' );
			$this->WP_Widget( 'avia_combo_widget', THEMENAME.' Combo Widget', $widget_ops );
		}

		function widget($args, $instance)
		{
			// prints the widget

			extract($args, EXTR_SKIP);
			$posts = empty($instance['count']) ? 4 : $instance['count'];

			echo $before_widget;
			echo "<div class='tabcontainer border_tabs top_tab tab_initial_open tab_initial_open__1'>";

			echo '<div class="tab first_tab active_tab widget_tab_popular"><span>'.__('Popular', 'avia_framework').'</span></div>';
			echo "<div class='tab_content active_tab_content'>";
			avia_get_post_list('cat=&orderby=comment_count&posts_per_page='.$posts);
			echo "</div>";

			echo '<div class="tab widget_tab_recent"><span>'.__('Recent', 'avia_framework').'</span></div>';
			echo "<div class='tab_content'>";
			avia_get_post_list('showposts='. $posts .'&orderby=post_date&order=desc');
			echo "</div>";

			echo '<div class="tab last_tab widget_tab_tags"><span>'.__('Tags', 'avia_framework').'</span></div>';
			echo "<div class='tab_content tagcloud'>";
			wp_tag_cloud('smallest=12&largest=12&unit=px');
			echo "</div>";

			echo "</div>";
			echo $after_widget;
		}

		function update($new_instance, $old_instance)
		{
			$instance = $old_instance;
			foreach($new_instance as $key=>$value)
			{
				$instance[$key]	= strip_tags($new_instance[$key]);
			}

			return $instance;
		}

		function form($instance) {
			//widgetform in backend

			$instance = wp_parse_args( (array) $instance, array('count' => 4) );
			if(!is_numeric($instance['count'])) $instance['count'] = 4;

	?>
			<p>
			<label for="<?php echo $this->get_field_id('count'); ?>">Number of posts you want to display:
			<input class="widefat" id="<?php echo $this->get_field_id('count'); ?>" name="<?php echo $this->get_field_name('count'); ?>" type="text" value="<?php echo esc_attr($instance['count']); ?>" /></label></p>

		<?php
		}
	}
	add_action( 'ava_after_main_menu', 'enfold_customization_header_widget_area' );
function enfold_customization_header_widget_area() {
	dynamic_sidebar( 'header' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );
function enqueue_font_awesome() {
 
	wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' );
 
}
add_filter('avf_which_archive_output','avf_change_which_archive', 10, 3);
function avf_change_which_archive($output)
{
	if(is_category())
	{
		$output = single_cat_title('',false);
	}

	return $output;
}

Please help me not to end up in a psychward and let me know how i can achieve that (which by the way should not be that complicate, right?)

The following solution removes Enfolds custom functions for the image display of products and variations to restore the new image display starting from WooCommerce 3.0.0 including the new zoom feature and the WooCommerce native lightbox.

• Use only with WooCommerce Version 3.x.x
• Use only with Enfold version 4 to 4.0.5

If you just want to fix the basic image issue please stick with my first solution.

If you are curious and want to use the new zoom and lightbox feature from woocommerce continue reading.

—————————————————————————–
If you do NOT have a Child Theme

1. Download https://mensmaximus.de/dokumente/enfold/enfold-child-wc3.zip
2. Login to wordpress and select Appearance -> Themes in the admin menu
3. Click on ‘add new’ (top left of the theme page)
4. Click on ‘upload theme’ (top left of the theme page)
5. Click on the file select button and choose the enfold-child.zip file from step 1
6. Click on ‘Install now’
7. Activate the Enfold Child Theme after the installation has finished
8. Follow the instructions from http://kriesi.at/documentation/enfold/using-a-child-theme/
9. You are done. Have fun with the new features

—————————————————————————–
If you already have a Child Theme

1. Copy the following code block to the functions.php file of your child theme

/*
	Woocommerce 3.0.0 Compatibility Fix
	Remove Enfold's custom functions that conflict with the new image display in WooCommerce 3.0.0
*/
global $woocommerce;

if( version_compare( $woocommerce->version, '3.0.0', ">=" ) ) {

	add_theme_support( 'wc-product-gallery-zoom' );
	add_theme_support( 'wc-product-gallery-lightbox' );

	function avia_woocommerce_gallery_thumbnail_description($img, $attachment_id, $post_id, $image_class ) {
	    return $img;
	}
	function avia_woocommerce_post_thumbnail_description($img, $post_id){
	    return $img;
	}

}

2. Copy the following code block to the style.css file of your child theme

.woocommerce-product-gallery__trigger{
    position: absolute !important;
    top: 1em;
    left: 1em;
    z-index: 99;
}

3. Download https://mensmaximus.de/dokumente/enfold/enfold-child-wc3.zip and unpack the file
4. Connect to your hosting account via ftp and navigate to your child themes directory
5. If the child theme directory does not contain a directory called woocommerce you can simply copy the woocommerce directory from my child theme (step 3) to your child themes directory. Otherwise you need to check whether the woocommerce directory in your child theme contains a directory named ‘single-product’. If not you can copy the ‘single-product’ directory contained in the ‘woocommerce’ directory from my child theme (step 3) to your child themes ‘woocommerce directory’. If you already have a directory called ‘single-product’ you have to check wether the files contained in my child theme exist in your child theme. If not copy theme. If they do you need to merge the modifications (Hint: search for ‘noLightbox noHover’ and most likely you will know what to do).
6. You are done. Have fun with the new features

Good afternoon Mike. Your quick response is unreal! Wow!

You do not see a code snippet because I did not not have any to add. Tried numerous times running through the code in the forums with no luck so gave up.

(I guess my class=”custom-image”> can be whatever I decide to reference?

Here is all the CSS Code I have at the moment – nothing that would effect the Title Caption.

.current_page_item a > .avia-menu-text {color:#a4a4a4!important;}
}
#advanced_menu_toggle, #advanced_menu_hide {
background-color: #a4a4a4!important;
}
.sub_menu_socket {
display:none !important;
}
.phone-info {
font-size: 14px;
}
@media only screen and (max-width: 767px) {
.responsive #scroll-top-link {
display: block !important;
}}
.av_promobox {
background-color: transparent!important;
}
.avia-promocontent p {
font-size: 21px;
}

Hi Victoria,

thank you very much for your answer and your efforts! Unfortunately it didn’t change anything. On the PC Browser everything is still fine, but if you take a look at the pages by smartphone you will see a lot of empty space underneath the header image (coming from the color section / Farb-Sektion).

I would have been surprised if it worked, because the CSS selectors fullscreen_slider_0 .avia-slideshow-inner are not part of the soucecode environment of the image on the html/php page, which looks like this on http://www.bafatex.com/wordpress/de/das-unternehmen/:

<div id=”av_section_1″ class=”avia-section main_color avia-section-no-padding avia-no-border-styling avia-full-contain avia-bg-style-scroll avia-builder-el-0 el_before_av_one_full avia-builder-el-first av-minimum-height av-minimum-height-custom container_wrap sidebar_right” style=”background-repeat: no-repeat; background-image: url(http://www.bafatex.com/wordpress/wp-content/uploads/2017/03/bg_unternehmen-1.jpg); background-attachment: scroll; background-position: top center; ” data-section-bg-repeat=”contain”><div class=”container” style=”height:250px”><main role=”main” itemprop=”mainContentOfPage” class=”template-page content av-content-small alpha units”><div class=”post-entry post-entry-type-page post-entry-257″><div class=”entry-content-wrapper clearfix”></div></div></main><!– close content main element –></div></div>

You can see the empty space underneath the image grow when you just grab the right border of the browser window with your mouse. Pull it to the left to decrease the width of the window. Do you see what happens underneath the image?

Could the solution lie in altering some of the CSS selectors above? Or a media query? Or does it have to be an “add filter” php extension to the functions.php file of the child theme? If so, it would probably be quite difficult to define images and their display formats for each single page.

Best regards

• This reply was modified 8 years, 10 months ago by JGastmann.

Hi,
Ok figured it out. First remove the thumbnail function and create your own:

add_action( 'after_setup_theme', 'remove_thumbnail_enfold', 0 );

function remove_thumbnail_enfold($asdf) {

    remove_action( 'woocommerce_before_shop_loop_item_title', 'avia_woocommerce_thumbnail' );
}

add_action( 'woocommerce_before_shop_loop_item_title', 'avia_woocommerce_thumbnail_custom', 10);
function avia_woocommerce_thumbnail_custom()
{
	global $product, $avia_config;
	$rating = $product->get_rating_html(); //get rating

	$id = get_the_ID();
	$size = 'shop_catalog';

	echo "<div class='thumbnail_container'>";
		echo avia_woocommerce_gallery_first_thumbnail( $id , $size);
		echo get_the_post_thumbnail( $id , $size );
		echo "<div class='middle'><div class='hover'><img src='http://domain.com/link-to-your-image.png'></div></div>";
		if(!empty($rating)) echo "<span class='rating_container'>".$rating."</span>";
		if($product->product_type == 'simple') echo "<span class='cart-loading'></span>";
	echo "</div>";
}

Then in CSS:

.attachment-shop_catalog {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%)
}

.thumbnail_container:hover .attachment-shop_catalog {
  opacity: 0.3;
}

.thumbnail_container:hover .middle {
  opacity: 1;
}