thumbnail pop-up picture - Support | Kriesi.at

Hey Ivne!

please use the below CSS in Enfold > General Styling > Quick CSS

Change the background image link and add more nth-child(X) if you have more menu items.

.nested_nav .page_item a:hover::after{
  position:absolute;
  z-index:100000; 
  left:0px;
  top:50%;
  transform:translateY(-50%);
} 

.nested_nav .page_item:nth-child(1) a:hover::after{
  content:url('http://kriesi.at/themes/enfold-construction/files/2015/10/urban-development-36x36.jpg'); 
} 
.nested_nav .page_item:nth-child(2) a:hover::after{
  content:url('http://kriesi.at/themes/enfold-construction/files/2015/10/urban-development-36x36.jpg'); 
} 
.nested_nav .page_item:nth-child(3) a:hover::after{
  content:url('http://kriesi.at/themes/enfold-construction/files/2015/10/urban-development-36x36.jpg'); 
} 
.nested_nav .page_item:nth-child(4) a:hover::after{
  content:url('http://kriesi.at/themes/enfold-construction/files/2015/10/urban-development-36x36.jpg'); 
}

Regards,
Vinay Kashyap

June 10, 2016 at 7:26 am #646064

Hello,
How do I create the same in menus and sub-menus?
Thanks!

June 12, 2016 at 12:54 pm #646895

Josue

Hi,

Can you post the link to your website please?

Regards,
Josue

June 28, 2016 at 6:42 pm #654372

I would like to have this under the “artists” menu when it drops down. Thanks!

June 29, 2016 at 8:46 am #654660

Vinay

Hi,

Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

.av-main-nav li a:hover::after{
  position:absolute;
  z-index:100000; 
  left:-30px;
  top:50%;
  transform:translateY(-50%);
} 

.av-main-nav li:nth-child(1) a:hover::after{
  content:url('http://kriesi.at/themes/enfold-construction/files/2015/10/urban-development-36x36.jpg'); 
} 
.av-main-nav li:nth-child(2) a:hover::after{
  content:url('http://kriesi.at/themes/enfold-construction/files/2015/10/urban-development-36x36.jpg'); 
} 
.av-main-nav li:nth-child(3) a:hover::after{
  content:url('http://kriesi.at/themes/enfold-construction/files/2015/10/urban-development-36x36.jpg'); 
} 
.av-main-nav li:nth-child(4) a:hover::after{
  content:url('http://kriesi.at/themes/enfold-construction/files/2015/10/urban-development-36x36.jpg'); 
}

Best regards,
Vinay

July 25, 2016 at 6:37 pm #664751

Thank you!
What do I have to change in this code to have it only function with sub-menus?

July 25, 2016 at 6:58 pm #664761

Josue

Hi,

Try this:

.av-main-nav .sub-menu li a:hover::after{
  position:absolute;
  z-index:100000; 
  left:-30px;
  top:50%;
  transform:translateY(-50%);
} 

.av-main-nav .sub-menu li:nth-child(1) a:hover::after{
  content:url('http://kriesi.at/themes/enfold-construction/files/2015/10/urban-development-36x36.jpg'); 
} 
.av-main-nav .sub-menu li:nth-child(2) a:hover::after{
  content:url('http://kriesi.at/themes/enfold-construction/files/2015/10/urban-development-36x36.jpg'); 
} 
.av-main-nav .sub-menu li:nth-child(3) a:hover::after{
  content:url('http://kriesi.at/themes/enfold-construction/files/2015/10/urban-development-36x36.jpg'); 
} 
.av-main-nav .sub-menu li:nth-child(4) a:hover::after{
  content:url('http://kriesi.at/themes/enfold-construction/files/2015/10/urban-development-36x36.jpg'); 
}

Best regards,
Josue

July 26, 2016 at 3:38 pm #665365

Thank you!
1) Now each sub-menu gets the same set and order of thumbnail pictures. Instead I would like to create a individual set/order of pictures for each sub-menu. Where do I specify menu item number ?
2) Is there a chance I can make pictures always appear at the same place?
3) Can I resize the picture by the %?

July 28, 2016 at 2:05 pm #666238

Andy