CODEWITHSUNDEEP
htmlcss
Tasos Molivi Ignatiadis
Tasos Molivi Ignatiadis

Reputation: 1

Hover over text and overlay transformation

I have overlaid two layers of text, and I try to animate with :hover the overlaid text to fade out and simultaneously the underlaid text to fade in.

http://prntscr.com/nw3tc4

The problem seems that the hover command only recognizes the upper text, but I try with one hover to activate both layers.

I made a grid of each letter independently, so when I hover over one letter it disappears and the one beneath it appears. But I can successfully only animate the over text and not the underneath one.

Is it possible only with CSS? Any info is appreciated! 

  <section>
      <ul class="letters">
        <li class="molivi">M</li>
        <li class="molivi">O</li>
        <li class="molivi">L</li>
        <li class="molivi">I</li>
        <li class="molivi">V</li>
        <li class="molivi">I</li>
        <li class="molivi">.</li>
        <li class="design">D</li>
        <li class="design">E</li>
        <li class="design">S</li>
        <li class="design">I</li>
        <li class="design">G</li>
        <li class="design">N</li>
        <li class="design">.</li>
      </ul>
    </section>


.letters{
  list-style: none;
  display:grid;
  grid-template-columns: 4fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 4fr;
  grid-column-gap: 5px;
  font-size: 150px;
  margin: 5rem;
}
.design{
/* visibility: hidden; */ 
/* visibility or opacity, I'm not sure which one*/
opacity: 0;
}
.molivi{
  color: red;
}

.molivi:hover {opacity:0}

.design:hover{
/* visibility: visible; */
opacity:1;
}





/*WORD "MOLIVI" */

li:nth-child(1){
  grid-column: 2/ span 1;
  grid-row:  1/ span 1;
  z-index: 2;
}
li:nth-child(2){
  grid-column: 3/ span 1;
  grid-row:  1/ span 1;
  z-index: 2;
}
li:nth-child(3){
  grid-column: 4/ span 1;
  grid-row:  1/ span 1;
  z-index: 2;

}
li:nth-child(4){
  grid-column: 5/ span 1;
  grid-row:  1/ span 1;
  z-index: 2;

}
li:nth-child(5){
  grid-column: 6/ span 1;
  grid-row:  1/ span 1;
  z-index: 2;

}
li:nth-child(6){
  grid-column: 7/ span 1;
  grid-row:  1/ span 1;
  z-index: 2;
  text-align: center;
}
li:nth-child(7){
  grid-column: 8/ span 1;
  grid-row:  1/ span 1;
  z-index: 2;
}



/*WORD DESIGN*/
li:nth-child(8){
  grid-column: 2/ span 1;
  grid-row:  1/ span 1;
  /* text-align: center; */

}
li:nth-child(9){
  grid-column: 3/ span 1;
  grid-row:  1/ span 1;
  /* text-align: center; */
}
li:nth-child(10){
  grid-column: 4/ span 1;
  grid-row:  1/ span 1;
}
li:nth-child(11){
  grid-column: 5/ span 1;
  grid-row:  1/ span 1;
}
li:nth-child(12){
  grid-column: 6/ span 1;
  grid-row:  1/ span 1;
}
li:nth-child(13){
  grid-column: 7/ span 1;
  grid-row:  1/ span 1;
}
li:nth-child(14){
  grid-column: 8/ span 1;
  grid-row:  1/ span 1;
}

Upvotes: 0

Views: 30

Answers (1)

BugsArePeopleToo
BugsArePeopleToo

Reputation: 2996

Put the change on hover of the container, changing the opacity value accordingly:

.letters:hover .design {
  opacity: 1;
}
.letters:hover .molivi {
  opacity: 0;
}

Add a transition property to the items in the list. This is applying to all of them the same:

.letters li {
  transition: all 0.5s ease;
}

Add a transition-delay to each item. You can control the speed of the animation by adjusting this value, as well as control the direction the fade is happening based on which value you put on which item in the sequence:

transition-delay: 0.1s;


.letters {
  list-style: none;
  display: grid;
  grid-template-columns: 4fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 4fr;
  grid-column-gap: 5px;
  font-size: 150px;
  margin: 5rem;
}

.letters li {
  transition: all 0.5s ease;
}

.design {
  opacity: 0;
}

.molivi {
  color: red;
  opacity: 1;
}

.letters:hover .design {
  opacity: 1;
}
.letters:hover .molivi {
  opacity: 0;
}



/*WORD "MOLIVI" */

li:nth-child(1) {
  grid-column: 2/ span 1;
  grid-row: 1/ span 1;
  z-index: 2;
  transition-delay: 0s;
}

li:nth-child(2) {
  grid-column: 3/ span 1;
  grid-row: 1/ span 1;
  z-index: 2;
  transition-delay: 0.1s;
}

li:nth-child(3) {
  grid-column: 4/ span 1;
  grid-row: 1/ span 1;
  z-index: 2;
  transition-delay: 0.2s;
}

li:nth-child(4) {
  grid-column: 5/ span 1;
  grid-row: 1/ span 1;
  z-index: 2;
  transition-delay: 0.3s;
}

li:nth-child(5) {
  grid-column: 6/ span 1;
  grid-row: 1/ span 1;
  z-index: 2;
  transition-delay: 0.4s;
}

li:nth-child(6) {
  grid-column: 7/ span 1;
  grid-row: 1/ span 1;
  z-index: 2;
  text-align: center;
  transition-delay: 0.5s;
}

li:nth-child(7) {
  grid-column: 8/ span 1;
  grid-row: 1/ span 1;
  z-index: 2;
  transition-delay: 0.6s;
}


/*WORD DESIGN*/

li:nth-child(8) {
  grid-column: 2/ span 1;
  grid-row: 1/ span 1;
  transition-delay: 0.7s;
}

li:nth-child(9) {
  grid-column: 3/ span 1;
  grid-row: 1/ span 1;
  transition-delay: 0.8s;
}

li:nth-child(10) {
  grid-column: 4/ span 1;
  grid-row: 1/ span 1;
  transition-delay: 0.9s;
}

li:nth-child(11) {
  grid-column: 5/ span 1;
  grid-row: 1/ span 1;
  transition-delay: 1s;
}

li:nth-child(12) {
  grid-column: 6/ span 1;
  grid-row: 1/ span 1;
  transition-delay: 1.1s;
}

li:nth-child(13) {
  grid-column: 7/ span 1;
  grid-row: 1/ span 1;
  transition-delay: 1.2s;
}

li:nth-child(14) {
  grid-column: 8/ span 1;
  grid-row: 1/ span 1;
  transition-delay: 1.3s;
}
<section>
  <ul class="letters">
    <li class="molivi">M</li>
    <li class="molivi">O</li>
    <li class="molivi">L</li>
    <li class="molivi">I</li>
    <li class="molivi">V</li>
    <li class="molivi">I</li>
    <li class="molivi">.</li>
    <li class="design">D</li>
    <li class="design">E</li>
    <li class="design">S</li>
    <li class="design">I</li>
    <li class="design">G</li>
    <li class="design">N</li>
    <li class="design">.</li>
  </ul>
</section>

Upvotes: 2

Related Questions