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

T

TinyWay

Gamma

Verificación en dos pasos activada

• 25 Jun 2016

• #1

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.

(Logo Normal)


(Logo con el cursor encima)

Uso un Theme de Wordpress

 

AdrianGuerrero

Épsilon

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 25 Jun 2016

• #2

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.

 

gluglu

Beta

Diseñador

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 26 Jun 2016

• #3

muchas gracias AdrianGuerrero por tu ayuda:encouragement:

 

ztvmark

Delta

Programador

Verificación en dos pasos activada

• 18 Jul 2016

• #4

un div de fondo negro
un span o h1 o h2 color white
al span:hover pasale el degradado

o ve esto
Truco CSS: Texto con color degradado | Blog de Escuela Digital

 

gfranco95

Gamma

Diseñador

Verificación en dos pasos activada

• 5 Oct 2016

• #5

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!

 

N

NRK79

Beta

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 12 Nov 2016

• #6

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

 

M

Marketing Doing

Épsilon

Verificación en dos pasos activada

• 5 Dic 2016

• #7

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

 

M

matiaskpo

Delta

SEO

No recomendado

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 5 Dic 2016

• #8

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.
-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: 5 Dic 2016