Mega menu images

Hi,

it depends on which hover effect you want.

Please try out this CSS and see if it fits. It is not exactly the effect because you can not cut the edges on that background on hover, as it would normally be with the zoom effect of the Image Frame Widget. Nonetheless it should do the trick.

#mobile-menu .mega-menu .sub-menu li a::before, 
#main-nav .mega-menu .sub-menu li a::before {
  transition: all 0.3;
}
#mobile-menu .mega-menu .sub-menu li a:hover::before, 
#main-nav .mega-menu .sub-menu li a:hover::before {
  -webkit-transform: scale3d(1.1, 1.1, 1);
  -ms-transform: scale3d(1.1, 1.1, 1);
  transform: scale3d(1.1, 1.1, 1);
}

I forgot an s after the 0.3.

Please use this instead:

#mobile-menu .mega-menu .sub-menu li a::before, 
#main-nav .mega-menu .sub-menu li a::before {
  transition: all 0.3s;
}
#mobile-menu .mega-menu .sub-menu li a:hover::before, 
#main-nav .mega-menu .sub-menu li a:hover::before {
  -webkit-transform: scale3d(1.1, 1.1, 1);
  -ms-transform: scale3d(1.1, 1.1, 1);
  transform: scale3d(1.1, 1.1, 1);
}

There is no other real way we can do anything more.

But the picture frame just grows to the right (footer2).

Your image is too small. Use an image with 720px width.

Picture frame problem.

What do you mean with this? Please provide more details if you need help with something. Otherwise I have to ask again and again for more information.

Footer2 image frame 330x172px

The footer image should have at least 720px width too. Otherwise it will scale to the right. The image should fit its column, so you need to have a larger image in it.

İmage border

Is it already fixed? I don’t see that border on your website.

I don’t know what you mean with this image.

As I said above, I can’t see that border in your menu.

Please thake a look at this screenshot.

And again, please provide more information. Talk with me. I can’t know what you mean when you link to your site with this image.

I took a look at your website with Chrome. There the white border appears on hover too. With Firefox it worked.

Applying this rule should fix it.

#mobile-menu .mega-menu .sub-menu li a::before, 
#main-nav .mega-menu .sub-menu li a::before {
  background-repeat: no-repeat;
}

Why does not the image open to the right. 750x450px

I can’t know what you mean with “the image”. Please provide more information. Otherwise I have to ask again and again.

Do you mean the image in the footer? This is still 330x172px. Do you maybe need to link it in the widget again?