Añadir efecto de brillo al logo al pasar cursor en Wordpress

  • Autor Autor TinyWay
  • Fecha de inicio Fecha de inicio
T

TinyWay

Gamma
Verificación en dos pasos activada
Verificado por Whatsapp
Hola amigos, ya que no tengo mucha experiencia que digamos en programar en Wordpress, me gustaría saber si alguien estuviese dispuesto a ayudarme a hacer esto con el logo de mi página como muestro en las imágenes.
ezeDE4M.webp
(Logo Normal)

SD4wy0R.webp
(Logo con el cursor encima)

Uso un Theme de Wordpress
 
Buenas tardes {hora peninsular} con CSS es posible hacerlo con la etiqueta :hover aplicando un degradado exterior (en este caso blanco) para crear el efecto brillo.
 
muchas gracias AdrianGuerrero por tu ayuda:encouragement:
 
con un hover puedes hacer esto por ejemplo:

.logo a {
background: url(http://forobeta.com/attachments/css/80261d1466871046-que-logo-brille-al-situar-cursor-wp-ezede4m.jpg) no-repeat;
}

.logo a:hover {
background: url(http://forobeta.com/attachments/css/80262d1466871075-que-logo-brille-al-situar-cursor-wp-sd4wy0r.jpg) no-repeat;
}

nota: en el que dice ".logo a" esta el logo que diste de ejemplo sin el resplandor en los bordes, y en el ".logo a:hover" esta el segundo logo con el resplandor que diste de ejemplo que se mostraría ya en el curso! espero te sirve como guía base a lo que quieres llegar saludo!
 
Tienes que emplear el selector hover.
Si es un texto deberás usar text-shadow en el selector hover por ejemplo text-shadow: 0px 0px 5px #fff;
Si es una imagen deberás cargar una imagen de sustitución en el hover tal como indica gfranco95
 
Es bastante sencillo; solo con colocar la etiqueta :hover y especificar que quieres que haga estará listo. De todas formas podrías verte algún vídeo de Youtube que hable sobre ese tema
 
Amigos, si no sabe programar en wordpress, no creo que sepa nisiquiera donde poner los codigos para editar el css....:sorrow:

-Inspecciona tu web, click derecho en el logo inspecionar, mira en que clase esta esta metido. Sin título.webp
-entra en tu panel de administracion, apariencia, editar.
- Te vas al fondo del archivo y pones esto. (en mi ejemplo seria asi)

Insertar CODE, HTML o PHP: 
a.navbar-brand:hover{
text-shadow: 0px 0px 2px white;}
O
Insertar CODE, HTML o PHP: 
a.navbar-brand img:hover{
box-shadow: 0px 0px 2px white;

Estos funcionan muy bien con .svg (prueba en convertir tu logo en este formato)
 
Última edición:
Hay que estar conectado o registrado para responder aquí.

Temas similares

duke
Cómo crear un desplegable al pasar cursor en Wordpress con Elementor
Respuestas
5
Visitas
275
duke
duke
Atrás
Arriba