Hover issues changing an icon to text

[hbjr7]

I'm having coding issues with creating a hover effect for icons. I want to change the icon into specific text when hovered over, but I'm not getting any results.

 

HTML:

 

<!--Interactive Squares-->
            
    <div class="small-boxes">
        <p class="tips-icons"><i class="icon-sun-o"></i></p>
    </div>
            
    <div class="small-boxes"><p class="tips-icons"><i class="icon-umbrella-weather"></i></p></div>
    <div class="small-boxes"><p class="tips-icons"><i class="icon-squirrel"></i></p></div>
    <div class="small-boxes"><p class="tips-icons"><i class="icon-cloud"></i></p></div>
    
            
            
   <!--Hover Action-->
      <p class=text1>Gardening for Sunshine</p>  
      <p class=text2>Gardening for Rain</p>
      <p class=text3>Avoid the Squirrels</p>
      <p class=text4>Gardening for Shade</p>
            
    <!-- End of Hover Action-->

 

 

 

CSS:

.clear {
    clear: both;
}
.last {
    margin-right: 0;
    
    
}
.tips-icons {
    color: green;
    font-size: 85px;
    letter-spacing: 30px;
    margin: 30px 20px 20px 60px;
   
}
/* Hover Action */
.tips-icons: hover .text1 { 
    opacity: 0.6; 
    text-align: justify; 
    color: green; 
    font-size: 20px; 
    font-weight: 700; 
    font-family:'Roboto', sans-serif; 
    padding:30px; 
}
.text1 { 
    width: 200px; 
    height: 150px; 
    background: #FFF;
    color: green;
    opacity: 0; 
} 
.text2 { 
    width: 340px; 
    height: 217px; 
    background: #FFF; 
    color: green;
    opacity: 0; 
} 
.text3 { 
    width: 200px; 
    height: 150px; 
    background: #FFF;
    color: green;
    opacity: 0; 
} 
.text4 { 
    width: 200px; 
    height: 150px; 
    background: #FFF; 
    color: green;
    opacity: 0; 
} 

/* ---End of Hover Action--- */
.small-boxes {
    border-radius: 25px;
    background: white;
    padding: 20px; 
    width: 200px;
    height: 150px;
    float: left;
    margin: 40px 40px 30px 80px;
    box-shadow: 10px 10px 5px #bfbfbf;
    border: solid 8px #99ff99;
    
}

            

Edited February 23, 2016 by Mur
Wrapping code in formatted tags

[game_over]

Hi,

 

You might want to do a little bit of reading how CSS works.

 

.tips-icons: hover .text1

 

This selector won't do anything for two reasons:

 

You have a space between : and hover .. CSS now thinks 'hover' is it's own selector... well it would if it wasn't incorrect syntax.

 

It should be .tips-icons:hover

 

Also, you have written it in a way that .text1 must be a child of .tips-icons like so:

 

<p class="tips-icons">

  <p class=text1>Gardening for Sunshine</p>  

</p>

 

The next problem you have is, CSS is not directly able to replace the content of 1 div with another div, unless you overlay them together and hide one as you show the other on hover... not ideal. Another method with CSS is to use the content: "something..." css property... but the content will be in CSS and not HTML, so it may not be viable depending on use case.

 

So, lets go with what you already have. Moved your text1/2/3/4 divs inside your boxes and we'll hide one, and show the other on hover.

 

You are also repeating the same code over and over, you don't need to repeat CSS for the same selector (text1, text2, text3, text4) you could just call them text.

 

Also, they aren't paragraphs, so no need to use P.

 

    <div class="small-boxes">
        <i class="fa fa-close"></i>
        <span>Gardening for Sunshine</span>  
    </div>
            
    <div class="small-boxes">
        <i class="fa fa-close"></i>
        <span>Gardening for Rain</span>
    </div>
    
    <div class="small-boxes">
        <i class="fa fa-close"></i>
        <span>Avoid the Squirrels</span>
    </div>
    
    <div class="small-boxes">
        <i class="fa fa-close"></i>
        <span>Gardening for Shade</span>
    </div>

 

i {
    color: green;
    font-size: 85px !important;
    padding-top: 25px;
}

.small-boxes {
    border-radius: 25px;
    background: white;
    width: 200px;
    height: 150px;
    line-height: 150px;
    text-align: center;
    float: left;
    margin: 40px 40px 30px 80px;
    box-shadow: 10px 10px 5px #bfbfbf;
    border: 8px solid #99ff99;
}

span {
    color: green;
    display: none;
}

.small-boxes:hover i {
  display: none;
}

.small-boxes:hover span {
  display: inline;
}

 

Here is an example of the above code in action: https://jsfiddle.net/LjaL19uf/

 

The only thing you need to do is change your icons back.

[hbjr7]

Thank you! Worked great.