Texte sur la forme à Diff. Texte sur Hover

Question

Je ne me suis définitivement jamais identifié en tant que codeur, c'est pourquoi j'ai besoin d'aide. J'ai essayé & essayé d'obtenir une grille de formes avec le texte superposé pour changer de texte différent chaque fois que la souris plane dessus - texte complètement différent. J'ai regardé avant & après les propriétés mais je n'arrive toujours pas à l'obtenir à cause de la grille "css". J'espère avoir "nom" sur la forme normale, puis d'autres textes sur la forme planifiée pour plus d'informations. Comment ferais-je cela? J'ai fourni un violon pour tout montrer.

http://jsfiddle.net/6c4v2ypv/3/

Merci à tous pour votre aide énormément.

CSS

.grid { 
    width: 100%; 
    max-width: 900px; 
    margin: 0 auto; 
    background: #fff; 
} 

.grid::after { 
    content: ""; 
    display: block; 
    clear: both; 
} 

.grid-item { 
    width: 21.833%; 
    padding-bottom: 21.833%; 
    overflow: hidden; 
    float: left; 
    background: #BBB; 
    transform: rotate(45deg); 
    margin: 5.5%; 
    margin-top: -11%; 
} 

.grid-item:nth-child(1), 
.grid-item:nth-child(2), 
.grid-item:nth-child(3) { 
    margin-top: 5%; 
} 

.grid-item:nth-child(5n+4) { 
    margin-left: 21.9%; 
} 

.grid-item:nth-child(5n+6) { 
    clear: left; 
} 

.grid-item:nth-child(5n+6):last-of-type { 
    margin-left: 38.25%; 
} 

.grid-item:hover { 
    background: #000; 
} 

.grid-inner { 
    box-sizing: border-box; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    transform: rotate(-45deg); 
    text-align: center; 
    padding-top: 40%; 
    font-size: 1em; 
} 

.grid-inner:hover a span { 
    display: none; 
} 

.grid-inner:hover:after { 
    box-sizing: border-box; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    transform: rotate(-45deg); 
    text-align: center; 
    padding-top: 40%; 
    font-size: 1em; 
    background-color: black; 
} 

Answer 1

Peut-être?

.grid { 
 
    width: 100%; 
 
    max-width: 900px; 
 
    margin: 0 auto; 
 
    background: #fff; 
 
} 
 

 
.grid::after { 
 
    content: ""; 
 
    display: block; 
 
    clear: both; 
 
} 
 

 
.grid-item { 
 
    width: 21.833%; 
 
    padding-bottom: 21.833%; 
 
    overflow: hidden; 
 
    float: left; 
 
    background: #BBB; 
 
    transform: rotate(45deg); 
 
    margin: 5.5%; 
 
    margin-top: -11%; 
 
} 
 

 
.grid-item:nth-child(1), 
 
.grid-item:nth-child(2), 
 
.grid-item:nth-child(3) { 
 
    margin-top: 5%; 
 
} 
 

 
.grid-item:nth-child(5n+4) { 
 
    margin-left: 21.9%; 
 
} 
 

 
.grid-item:nth-child(5n+6) { 
 
    clear: left; 
 
} 
 

 
.grid-item:nth-child(5n+6):last-of-type { 
 
    margin-left: 38.25%; 
 
} 
 

 
.grid-item:hover { 
 
    background: #000; 
 
} 
 

 
.grid-inner { 
 
    box-sizing: border-box; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    transform: rotate(-45deg); 
 
    text-align: center; 
 
    padding-top: 40%; 
 
    font-size: 1em; 
 
} 
 

 
.grid-inner:hover a span { 
 
    display: none; 
 
} 
 

 
.grid-inner:hover:after { 
 
    box-sizing: border-box; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    transform: rotate(-45deg); 
 
    text-align: center; 
 
    padding-top: 40%; 
 
    font-size: 1em; 
 
    background-color: black; 
 
} 
 

 
.grid-inner-hover { 
 
    opacity: 0; 
 
} 
 

 
.grid-item:hover .grid-inner-hover { 
 
    opacity: 1; 
 
    color: #fff; 
 
}

<div class="grid"> 
 
    <div class="grid-item"> 
 
    <div class="grid-inner">Name 1</div> 
 
    <div class="grid-inner grid-inner-hover">Name 1 Hover</div> 
 
    </div> 
 
    <div class="grid-item"> 
 
    <div class="grid-inner">Name 2</div> 
 
    <div class="grid-inner grid-inner-hover">Name 2 Hover</div> 
 
    </div> 
 
    <div class="grid-item"> 
 
    <div class="grid-inner">Name 3</div> 
 
    <div class="grid-inner grid-inner-hover">Name 3 Hover</div> 
 
    </div> 
 
    <div class="grid-item"> 
 
    <div class="grid-inner">Name 4</div> 
 
    <div class="grid-inner grid-inner-hover">Name 4 Hover</div> 
 
    </div> 
 
    <div class="grid-item"> 
 
    <div class="grid-inner">Name 5</div> 
 
    <div class="grid-inner grid-inner-hover">Name 5 Hover</div> 
 
    </div> 
 
    <div class="grid-item"> 
 
    <div class="grid-inner">Name 6</div> 
 
    <div class="grid-inner grid-inner-hover">Name 6 Hover</div> 
 
    </div> 
 
</div>

Answer 2

est ici un exemple simple:

.item1:hover span, .item2:hover span{ 
 
    display: none; 
 
} 
 
.item1:hover:after{ 
 
    content: 'ADD'; 
 
} 
 

 
.item2:hover:after{ 
 
    content: 'Subtract'; 
 
}

<div class="item1">  
 
     <span >first</span> 
 
</div> 
 

 
<div class="item2">  
 
     <span>second</span> 
 
</div>

Answer 3

Vous pouvez également ajouter quelque chose comme ça dans votre css:

.grid-inner:hover:after{ 
    content:'hello'; 
    color:#fff; 
    transform:rotate(0deg); 
} 

http://jsfiddle.net/6c4v2ypv/5/