Como fazer: Cabeçalho Houver (quando passa o mouse)

Eis o ultimo código desvendado do meu layout mega colorido! como fazer o cabeçalho que muda de cor quando passar o mouse o/ 
OBS: Esse código não é adaptado para a nova era de layouts responsivos 
Depois que a Taciele Alcolea trocou de layout praticamente na mesma época eu também troquei! em partes, o layout do e.v foi praticamente todo inspirado no dela com cores, menu lateral de categorias(que já ensinei aqui), cabeçalho houver que é o que vamos aprender nesse post! que é o ultimo post antes do layout novo!
Sempre achei o design do blog dela muito funcional tudo a mão, bem organizado, mais sem perder a característica que eu e ela temos em comum, que são as cores e o quanto as cores trazem alegria de viver <3
Agora seremos responsivos e Ideias Blogger <3
(não se preocupem talvez o próximo será criado por min não estou abandonando meus designers totalmente únicos e muito meus, só preciso me atualizar quanto a layout responsivo e isso leva algum tempo!)
Porem não é fácil para uma blogueira que não vive do blog investir um dinheiro que não possui para fazer um layout todo estruturado, hoje em dia designer cobram cerca de 1 mil até 7 mil para fazer um blog, ou mais! então desde sempre quem faz essa parte do blog sou eu, que como vocês sabem, já estudei um pouquinho sobre isso mais desisti antes de ficar louca! rsrs tem que ter muita vocação.
Então por gostar muito do blog da taci e do jeito dela de ser viver e tudo mais, me inspirei nela e ouvi uma das coisas que ela sempre diz pra tudo "se eu consegui vocês também conseguem" e fui atrás do que eu queria transmitir no meu espacinho e deu nisso! um dos layouts mais elogiados da vida!

Agora vamos aprender:
Para ter um cabeçalho como o meu você precisa ter duas imagens semelhantes do mesmo tamanho para colocar no cabeçalho! no meu caso eu escolhi trocar algumas cores mais você pode fazer muitas coisas diferentes como por exemplo colocar uma mensagem secreta para seu leitores! como essas...

Depois disso, abra seu html aperta CTRL+ F e procure por 

/* Header
----------------------------------------------- */
Apague tudo que estiver na primeira parte abaixo dele e coloque isso

.header-inner {background-image: url("LINK DA IMAGEM-1"); background-position: center; max-width: 100%; min-height: 300px; max-height: 100%; background-repeat: no-repeat; } .header-inner:hover {background-image: url("LINK DA IMAGEM-2"); background-position: center; max-width: 100%; min-height: 300px; max-height:100%; background-repeat: no-repeat;}

Arco iris das modificações  

 -Você precisa hospedar as imagens em Algum site para utilizar-las, uso o Photobucket ou o TinyPic
- ó código que você irá utilizar é o "Link Direto" da imagem
-O que está em verde é a altura minima que a imagem terá no caso a altura da própria imagem

Agora foca no Print desse layout lindão vai :3
beijos<3 
Essa categoria do blog estará desatualizada a partir de hoje 28/05/16
Como fazer: Cabeçalho Houver (quando passa o mouse) Como fazer: Cabeçalho Houver (quando passa o mouse) Reviewed by Danielle Angelo on 28.5.16 Rating: 5

2 comentários:

  1. Ótima dica, gostei! Estava procurando há tempos como fazia esse efeito e fiquei feliz por ter achado! Uma pena que não funcione em lays responsivos :(

    www.cerejablack.com

    ResponderExcluir
    Respostas
    1. é :( obrigada pelo carinho guria <3

      Excluir