0

Quiero realizar un menú interactivo, al centro la imagen Cloud y al pasar el mouse sobre la imagen que me muestre 6 menús alrededor.

Muestro cómo se vería, el problema es cómo ubicar correctamente los div de los menús.

Encontré y apliqué a mi diseño el siguiente código, pero no logro hacer que se mantenga siempre la imagen al centro y los elementos rodeando. Cada vez que redimensiono el navegador se mueven de lugar los elementos:

.container > * {
  position: absolute;
  top: 200px;
  left: 50%;
  width: 70px;
  height: 70px;
  border-radius: 50% !important;
  padding-top: 20px !important;
  font-size: 16px !important;
}

.padre{
width:20%;
height: 20%;
left: 43%;
top: 40%;

/*padding:40px !important;font-size:30px !important;*/
}
.container > :nth-of-type(1) {
  transform: rotate(0deg) translate(10em) rotate(0deg);
}
.container > :nth-of-type(2) {
  transform: rotate(60deg) translate(10em) rotate(-60deg);
}
.container > :nth-of-type(3) {
  transform: rotate(120deg) translate(10em) rotate(-120deg);
}
.container > :nth-of-type(4) {
  transform: rotate(180deg) translate(10em) rotate(-180deg);
}
.container > :nth-of-type(5) {
  transform: rotate(240deg) translate(10em) rotate(-240deg);
}
.container > :nth-of-type(6) {
  transform: rotate(300deg) translate(10em) rotate(-300deg);
}
<div class="container">
    <div class="btn btn-success">
        <b>D</b>
    </div>
    <div class="btn btn-success">
        <b>D</b>
    </div>
    <div class="btn btn-success">
        <b>D</b>
    </div>
    <div class="btn btn-success">
        <b>D</b>
    </div>
    <div class="btn btn-success">
        <b>D</b>
    </div>
    <div class="btn btn-success">
        <b>D</b>
    </div>

    <div class="padre">
        <img src="~/Content/svg/cloud/cloud_empresarial.svg" />
    </div>
</div>

Mmuestra de ejemplo del menú:

Muestra de ejemplo del menú

6
  • 4
    Saludos y bienvenido te comento que tu pregunta tiene problemas de formato y por ende es casi seguro termine cerrada, considera leer Cómo preguntar, editar y mostrar lo que lleves al momento
    – user128299
    Commented el 13 feb. 2020 a las 2:41
  • 2
    espero haber podido entender bien las reglas, y muchas gracias por el comentario.
    – diom1
    Commented el 13 feb. 2020 a las 2:50
  • 3
    El problema persiste amigo, ya que no muestras avance alguno y en cambio pides que alguien lo haga y/o que te recomienden librerías motivos para cierre; consejo trata algo por tu cuenta y cuando tengas errores claros entonces eres mas que bienvenido para venir a preguntar
    – user128299
    Commented el 13 feb. 2020 a las 2:51
  • 1
    Bienvenido al sitio, te sugerimos revisar las preguntas que obtienen respuesta en el sitio. Tu pregunta necesita ser más específica, Edita la pregunta para limitarla a un problema específico, con el suficiente nivel de detalle para permitir identificar una respuesta adecuada.
    – Jorgesys
    Commented el 13 feb. 2020 a las 2:55
  • 1
    gracias, he modificado nuevamente la pregunta, espero ser mas especifico. gracias
    – diom1
    Commented el 13 feb. 2020 a las 3:20

1 respuesta 1

1

Quizás buscas algo como esto:

<html>
  <head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit/dist/css/uikit.min.css">
  </head>
  <body>
<div class="uk-container">
  <div>
    <div class="uk-inline uk-dark">
      <img src="https://getuikit.com/docs/images/light.jpg" alt="">
      <a class="uk-position-absolute uk-transform-center" style="left: 20%; top: 30%" href="javascript: void 0" uk-marker uk-tooltip="Hola mundo #1"></a>
      <a class="uk-position-absolute uk-transform-center" style="left: 60%; top: 40%" href="javascript: void 0" uk-marker uk-tooltip="Hola mundo #2"></a>
      <a class="uk-position-absolute uk-transform-center" style="left: 80%; top: 70%" href="javascript: void 0" uk-marker uk-tooltip="Hola mundo #3"></a>
    </div>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/uikit"></script>
  </body>
</html>

Si te fijas, cada etiqueta a tiene un atributo style, el cual sirve para especificar la posición de cada punto marcado en la imagen.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.