Un logo texte (avec effet) plutot qu'une image

[fichtre]

bonjour à tous !

toujours en train de bidouiller sur mon forum, j'ai maintenant envie de changer le logo par défaut qui envoye vers une image par un texte qui aurait un effet de mouvement au passage de la souris.

J'utilise un thème modifié par mes soins avec la base du NamedX de smftricks.
Mon logo actuel est une image png.
Je souhaiterais virer l'image ( tout en pouvant mettre un background ds le header si l'envie m'en prend un jour ) et mettre un texte en deux parties.

cf image jointe : texte1 pour le rendu de base.

Ensuite, au survol de la souris, le texte se met en mouvement

cf image jointe : texte2

L'idée me vient de mon wordpress qui sert de page d'accueil et je voudrais remettre ca sur le forum pour l'esthétique.

Le code que j'ai pu trouver ds le wp qui correspondrait à tout ça est

Code Select Expand

#masthead {
  text-align: center;
  background: #33363b;
  color: #888;
  border-top: solid 1px #464a51;
  z-index: 103;
  position: relative;
  padding-top: 20px;
}
#masthead #text-title-desc {
  clear: none;
  vertical-align: middle;
}
@media screen and (max-width: 991px) {
  #masthead #text-title-desc {
    float: none;
  }
}
@media screen and (max-width: 768px) {
  #masthead #text-title-desc {
    float: none;
  }
}
#masthead h1.site-title {
  font-size: 50px;
  margin-bottom: 5px;
  font-weight: bolder;
  letter-spacing: 1px;
  margin-top: 0px;
  padding: 0 5px;
  transition: 3s all ease;
  -webkit-transition: 3s all ease;
  -moz-transition: 3s all ease;
  -ms-transition: 3s all ease;
  -o-transition: 3s all ease;
}
@media screen and (max-width: 600px) {
  #masthead h1.site-title {
    font-size: 32px;
    margin-top: 20px;
  }
}
#masthead h1.site-title a {
  color: white;
}
#masthead h2.site-description {
  font-weight: 300;
  font-size: 15px;
  margin-top: 0px;
  color: #aaa;
  transition: 3s all ease;
  -webkit-transition: 3s all ease;
  -moz-transition: 3s all ease;
  -ms-transition: 3s all ease;
  -o-transition: 3s all ease;
  font-weight: normal;
}
#masthead #text-title-desc:hover h1.site-title {
  transform: scale(1.2) translateY(-5px);
  -webkit-transform: scale(1.2) translateY(-5px);
  -moz-transform: scale(1.2) translateY(-5px);
  -ms-transform: scale(1.2) translateY(-5px);
  -o-transform: scale(1.2) translateY(-5px);
}
#masthead #text-title-desc:hover h2.site-description {
  transform: scale(1.05) translateY(3px);
  -webkit-transform: scale(1.05) translateY(3px);
  -moz-transform: scale(1.05) translateY(3px);
  -ms-transform: scale(1.05) translateY(3px);
  -o-transform: scale(1.05) translateY(3px);
}
#masthead .masthead-container {
  padding-right: 5px;
  padding-left: 5px;
  padding-bottom: 0px;
}
#masthead #searchicon {
  float: right;
  padding: 19px 18px;
  font-size: 22px;
  overflow: visible;
  background: #b14437;
  cursor: pointer;
  transition: 0.2s all ease;
  -webkit-transition: 0.2s all ease;
  -moz-transition: 0.2s all ease;
  -ms-transition: 0.2s all ease;
  -o-transition: 0.2s all ease;
  color: white;
}
#masthead #searchicon:hover {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform-origin: bottom;
}
@media screen and (max-width: 767px) {
  #masthead #searchicon {
    position: absolute;
    right: 15px;
  }
}
.site-branding {
  padding: 0px 0;
  padding-top: 14px;
  position: relative;
  top: 0px;
  overflow: hidden;
  display: inline-block;
  float: none;
  width: 100%;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .site-branding {
    padding: 14px 0;
    width: 100%;
    text-align: center;
  }
}
@media screen and (max-width: 991px) {
  .masthead-container {
    text-align: center;
  }
}


Mes connaissances en php et css sont limitées, et l'outil inspecter de mon chrome est fort utile
Je présume que h1 correspond a Equinoxe et que H2 correspond a ysondre - pve - horde

Je suppose qu'il faut que j'aille ajouter une div quelque part dans le indextemplate puis rappeler cette div sur le css pour ajouter les conditions de transition.

Je vous met en PJ également ces deux fichiers et j'espère qu'une âme charitable ( Maximus si tu m'entends :p ) passe par là

En vous remerciant ! A bientôt

L'adresse de mon site est dans mon profil si besoin

[maximus23]

Bonjour,

C'est quoi le thème original ?

[fichtre]

Coucou !

il se trouve à cette adresse

[maximus23]

Bonsoir,

Ok c'est un thème premium donc on ne sait pas en débattre ici car il est uniquement pour toi qui a la licence de ce thème.

[fichtre]

Euh non non il n'est pas premium il est bien dans les free ^^ regarde bien En tous cas je n'ai rien au a payer, juste m'inscrire sur le site

[maximus23]

Ah ok il faut que je retrouve mes logins pour moi le prendre alors et voir cela en détail

[fichtre]

Pas de soucis c'est pas à la minute ^^

[fichtre]

pti up

[maximus23]

Bonjour,

Met moi le fichier en attache sur le forum de test que je regarde merci