Adicionar efeito de brilho ao logo ao passar cursor no Wordpress

T

TinyWay

Gamma

Verificación en dos pasos activada

• 25/06/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

Usuário com poucas negociações! Use sempre o saldo do ForoBeta!

• 25/06/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

Usuário com poucas negociações! Use sempre o saldo do ForoBeta!

• 26/06/2016

• #3

muchas gracias AdrianGuerrero por tu ayuda:encouragement:

 

ztvmark

Delta

Programador

Verificación en dos pasos activada

• 18/07/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

• 05/10/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

Usuário com poucas negociações! Use sempre o saldo do ForoBeta!

• 12/11/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

• 05/12/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

Usuário com poucas negociações! Use sempre o saldo do ForoBeta!

• 05/12/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)

Inserir CODE, HTML ou PHP:

a.navbar-brand:hover{
text-shadow: 0px 0px 2px white;}

O

Inserir CODE, HTML ou 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 edição: 05/12/2016