Menu with hover showing an image opening

Question

Menu with hover showing an image opening

Navigation

#1 by (0 votes)

0

Good.

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

Or could you direct me so that I can do it?

javascript html css

asked by anonymous 17.07.2018 / 00:48

1 answer

Problem with divs placement - Javascript Regex to validate currency, fractional, accepting negatives

score 0 · Accepted Answer

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

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

OBS: As I used display:flex and positions:relative/absolute , I needed to make the orange color on the background I needed to make a gambeta using box-shadow , if you use jQuery there are other ways to do this . It may be that CSS has a better way, but 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>