Menu with Hover showing an image opening

Question

Good.

Someone has some reusable example of a menu similar to this site: www.boali.com.br

Or you could direct me so I can do it?

Answer 1

Only with CSS is possible using pseudo-elementos, transform and transitions, To align everything you can use display:flex

From one studied in this model that can help you in the future, and if you need to work the CSS to be responsive to your taste, although it is already well aligned...

OBS: How I used display:flex and positions:relative/absolute, I needed to make the color orange on the background needed to make a gambit using box-shadow, if you’re going to use jQuery there are other ways to do this. Maybe with CSS you have a better way, but this way I think it’s cool.

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
}
.menu {
  height: 100vh;
  max-width: 100vw;
  background-image: url(http://unsplash.it/600/400);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.menu a {
  position: relative;
  display: inline-block;
  text-align: center;
  font-size: 1rem;
  font-family: sans-serif;
  text-shadow: 0 0 .5em rgba(0, 0, 0, 0.75);
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  margin: 0 1rem;
}
.menu a:nth-child(1),.menu a:nth-child(2) ,.menu a:nth-child(3)  {
  z-index: 20;
}
.menu a:hover {
  z-index: 25;
}
.menu a::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scaleX(0);
  display: inline-block;
  width: 100px;
  height: 200px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  overflow: hidden;
  box-shadow: 0 0 0 200vw rgba(255, 123, 0, 0);
  transition: transform 500ms ease, box-shadow 200ms linear;
  z-index: -1;
}
.menu a:hover::after {
  transform: translate(-50%, -50%) scaleX(1);
  box-shadow: 0 0 0 200vw rgba(255, 123, 0, 0.5);
}
.menu a:nth-of-type(1)::after {
  background-image: url(http://unsplash.it/100/200);
}
.menu a:nth-of-type(2)::after {
  background-image: url(http://unsplash.it/101/200);
}
.menu a:nth-of-type(3)::after {
  background-image: url(http://unsplash.it/102/200);
}

<section class="menu">

    <a href="#">item menu1</a>
    <a href="#">item menu2</a>
    <a href="#">item menu3</a>

</section>

<section>
  <h1>meu menu</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut excepturi eaque odit, magni aspernatur atque architecto recusandae, repudiandae distinctio obcaecati perferendis ab voluptate. Ipsa dolores deserunt consequatur nesciunt hic! Aperiam, dolorum atque dolor cum ea nemo, doloremque maxime tempora a ipsum, deleniti sequi est recusandae. Et tempora officiis voluptas impedit dolor dolorem vitae iure ex reprehenderit, odit aspernatur possimus quasi quibusdam, voluptates quo voluptate consequatur? Temporibus neque laborum laboriosam quae tempora eaque earum iste praesentium consectetur labore optio doloremque illum, esse accusamus molestiae saepe distinctio nihil, pariatur at! Beatae tempora iusto dolores quae, eos quaerat labore temporibus iste, illum quidem qui sapiente officia nisi ea mollitia provident earum, repellendus aut. Adipisci iure aut, pariatur magni labore culpa a repudiandae autem. Ducimus minima voluptatum excepturi reiciendis commodi cum fugit nam atque reprehenderit molestias dicta sint corrupti eum, cupiditate dolor impedit exercitationem est iusto repudiandae. Asperiores voluptates provident perspiciatis officiis, repellendus atque aut, dolores itaque at impedit reprehenderit consequatur quasi nobis, autem suscipit dolorum sit. Sapiente maiores explicabo earum cupiditate aliquid sunt totam aliquam nobis delectus nostrum voluptatibus pariatur nisi ab vel quae suscipit, recusandae debitis! Necessitatibus quibusdam modi omnis? Iure quidem unde eveniet at perspiciatis nam facere maxime suscipit ratione! Quidem! 
</p>
</section>