Efecto Hover en el texto.

[Crearten]

¡Hola a todos!

Estoy diseñando mi web y quiero crear el siguiente efecto:

Un efecto hover que se adapte al ancho del texto que tenga por encima, al mismo tiempo que se quede en la sección en la que estoy, por ejemplo, si estoy en el Inicio que se quede ahí y no desaparezca al quitar el cursor, o que si cambio a Opiniones haga lo mismo, también sería ideal que al pasar de un texto a otro hiciera una transición de adaptación al texto, no sé si me explico del todo, si no se acaba de entender adjuntaré un vídeo de lo que quiero decir, he visto esta animación por ejemplo en la app de Just Eat, cuando dentro de un restaurante cambias de una catergoría a otra, pero estoy seguro que en CSS existe código para ello.

El color de la forma trasera en hexadecimal sería: #161616 y las esquinas serían totalmente redondas, con un margen de seguridad de espaciado entre los laterales.

Adjunto también una captura de pantalla de mi proyecto para que sea más esclarecedor.

¡Muchas gracias de antemano!

[Teo]

Hola, @Crearten:

Gracias por escribirnos. Entiendo por tu mensaje que quieres personalizar los elementos del menú de tu tienda para mostrar un diseño interactivo específico, ¿cierto? Será un placer poder ayudar.

A modo de contexto, es importante tener en cuenta que cualquier pregunta relacionada con lenguaje de código o diseño especializado queda fuera del alcance de nuestro conocimiento en el equipo de soporte en redes y la Comunidad. Dicho esto, me alegra informarte de que existe un subforo en nuestra Comunidad en inglés que se llama Shopify Design en el que participan diferentes desarrolladores y expertos.

Para resolver cualquier consulta técnica con respecto a la creación de un diseño a través de código; lo ideal sería revisar si alguien ha subido una pregunta similar en el pasado. Si no encuentras lo que estás buscando, puedes subir tu consulta de nuevo. De esta forma, uno de los desarrolladores o participantes podrán darte más orientación. Como te comento, el idioma de interacción en estos foros es el inglés. No obstante, siempre puedes optar por utilizar el traductor de Google para mostrar el contenido en español si lo necesitas.

Nota: En todo momento puedes personalizar el código de tu tienda para implementar el diseño/estilo que desees. Puedes hacer estos a través del editor de código o con la herramienta de CSS personalizado.

Dicho esto, me alegra informarte de que en Shopify contamos con un equipo de especialistas en temas. Si cuentas con una plantilla desarrollada por Shopify y cumples con nuestra política de diseño, es posible que estos especialistas puedan implementar este diseño por ti. Para evaluar esto, puedes escribirnos a través de nuestro Centro de Ayuda, haciendo clic en Contacta con atención al cliente de Shopify.

Como alternativa, también puedes contratar a un Partner de Shopify para crear este diseño concreto. Nuestros Partners es un grupo de expertos, desarrolladores y especialistas que pueden ofrecerte un presupuesto para cualquier tipo de implementación o modificación que necesites aplicar a tu tienda. Mientras revisas estas opciones, ¿cómo está siendo tu experiencia con Shopify hasta el momento?