Menu icon Foundation
How to achieve a hover effect on panels in a block grid w/ Equalizer?

I've used the block grid along with equalizer to display some panels that contain both text and images (see image below).

Screen shot 2015 06 24 at 2.39.58 pm

I'm now trying to give my panels a hover state in which just the panel background changes. The way I've got it set up here (see images below), each element within the panel is getting a background change on hover. I don't want any content within the card to change, just the panel background.

Screen shot 2015 06 24 at 2.32.32 pm

Screen shot 2015 06 24 at 2.32.40 pm

  <section id="top-campaigns"> 
    <h2 class="text-center">Top Campaigns</h2>
    <div class="row">
      <div class="large-12 large-centered columns">
        <ul class="medium-block-grid-3 large-block-grid-3" data-equalizer data-options="equalize_on_stack: true;">
          <li>
            <a href="#">
              <div class="campaign-card">
                <h3>Help Send Us to Competition!</h3>
                <img src="images/race.jpg" alt="photo of KSU Motorsports team" title="KSU Motorsports team in their FSAE racecar" data-equalizer-watch>
                <h4>KSU Motorsports</h4>
                <p class="tag"><i class="fa fa-tag"></i> Competition Teams</p>
                <p class="raised">$500 raised</p>
                <div class="progress"><span class="meter" style="width: 33%"></span>
                </div>
                <p class="time-left">20 days to go</p>
              </div>
            </a>
          </li>

          <li>
            <a href="#">
              <div class="campaign-card">
                <h3>Bonjour, France!</h3>
                <img src="images/paris.jpg" alt="photo of the Eiffel Tower" title="Eiffel Tower in Paris, France" data-equalizer-watch>
                <h4>AUM French Club</h4>
                <p class="tag"><i class="fa fa-tag"></i> Cultural</p>
                <p class="raised">$3,100 raised</p>
                <div class="progress"><span class="meter" style="width: 80%"></span>
                </div>
                <p class="time-left">7 days to go</p>
              </div>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="campaign-card">
                <h3>So you think you can dance?</h3>
                <img src="images/dance.jpg" alt="photo of GSU Hip-Hop Dance Team at dance practice" title="GSU Hip-Hop Dance Team at dance practice" data-equalizer-watch>
                <h4>GSU Hip-Hop Dance Team</h4>
                <p class="tag"><i class="fa fa-tag"></i> Athletics</p>
                <p class="raised">$600 raised</p>
                <div class="progress"><span class="meter" style="width: 25%"></span>
                </div>
                <p class="time-left">30 days to go</p>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>        

         

.campaign-card {
  @include panel($white);
  :hover {
    background-color: scale-color($gray, $lightness: -10%) !important; 
  }
  border: 0;
  box-shadow: 2px 3px 3px 0px rgba(153,153,153,0.35);
  -webkit-box-shadow: 2px 3px 3px 0px rgba(153,153,153,0.35);
  -moz-box-shadow: 2px 3px 3px 0px rgba(9153,153,153,0.35);

  h3 {
    font-family: $font-family-sans-serif;
    font-weight: bolder;
    height: 50px;
    line-height: 1.25em;
    text-align: center;
  }
  h4 {
    font-family: $font-family-sans-serif;
    font-size: smaller;
    font-weight: 600;
    padding-top: .5em;
    text-align: left;
  }
  .raised {
    font-size: larger;
    font-weight: bolder;
    margin-bottom: 0.25em;
    margin-top: -0.8em;
    text-align: center;
  }
  .tag {
    color: $gray-dark;
    font-size: $small-font-size;
    margin-top: -5px;
    text-align: left;
  }
  .time-left {
    color: $gray-darker;
    font-size: $small-font-size;
    margin-bottom: -0.5em;
    margin-top: -0.5em;
    text-align: center;
  }
  .time-left-barely {
    color: #FF6664;
  }
}
            

         

panelbackgroundcolorhover

I've used the block grid along with equalizer to display some panels that contain both text and images (see image below).

Screen shot 2015 06 24 at 2.39.58 pm

I'm now trying to give my panels a hover state in which just the panel background changes. The way I've got it set up here (see images below), each element within the panel is getting a background change on hover. I don't want any content within the card to change, just the panel background.

Screen shot 2015 06 24 at 2.32.32 pm

Screen shot 2015 06 24 at 2.32.40 pm

  <section id="top-campaigns"> 
    <h2 class="text-center">Top Campaigns</h2>
    <div class="row">
      <div class="large-12 large-centered columns">
        <ul class="medium-block-grid-3 large-block-grid-3" data-equalizer data-options="equalize_on_stack: true;">
          <li>
            <a href="#">
              <div class="campaign-card">
                <h3>Help Send Us to Competition!</h3>
                <img src="images/race.jpg" alt="photo of KSU Motorsports team" title="KSU Motorsports team in their FSAE racecar" data-equalizer-watch>
                <h4>KSU Motorsports</h4>
                <p class="tag"><i class="fa fa-tag"></i> Competition Teams</p>
                <p class="raised">$500 raised</p>
                <div class="progress"><span class="meter" style="width: 33%"></span>
                </div>
                <p class="time-left">20 days to go</p>
              </div>
            </a>
          </li>

          <li>
            <a href="#">
              <div class="campaign-card">
                <h3>Bonjour, France!</h3>
                <img src="images/paris.jpg" alt="photo of the Eiffel Tower" title="Eiffel Tower in Paris, France" data-equalizer-watch>
                <h4>AUM French Club</h4>
                <p class="tag"><i class="fa fa-tag"></i> Cultural</p>
                <p class="raised">$3,100 raised</p>
                <div class="progress"><span class="meter" style="width: 80%"></span>
                </div>
                <p class="time-left">7 days to go</p>
              </div>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="campaign-card">
                <h3>So you think you can dance?</h3>
                <img src="images/dance.jpg" alt="photo of GSU Hip-Hop Dance Team at dance practice" title="GSU Hip-Hop Dance Team at dance practice" data-equalizer-watch>
                <h4>GSU Hip-Hop Dance Team</h4>
                <p class="tag"><i class="fa fa-tag"></i> Athletics</p>
                <p class="raised">$600 raised</p>
                <div class="progress"><span class="meter" style="width: 25%"></span>
                </div>
                <p class="time-left">30 days to go</p>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>        

         

.campaign-card {
  @include panel($white);
  :hover {
    background-color: scale-color($gray, $lightness: -10%) !important; 
  }
  border: 0;
  box-shadow: 2px 3px 3px 0px rgba(153,153,153,0.35);
  -webkit-box-shadow: 2px 3px 3px 0px rgba(153,153,153,0.35);
  -moz-box-shadow: 2px 3px 3px 0px rgba(9153,153,153,0.35);

  h3 {
    font-family: $font-family-sans-serif;
    font-weight: bolder;
    height: 50px;
    line-height: 1.25em;
    text-align: center;
  }
  h4 {
    font-family: $font-family-sans-serif;
    font-size: smaller;
    font-weight: 600;
    padding-top: .5em;
    text-align: left;
  }
  .raised {
    font-size: larger;
    font-weight: bolder;
    margin-bottom: 0.25em;
    margin-top: -0.8em;
    text-align: center;
  }
  .tag {
    color: $gray-dark;
    font-size: $small-font-size;
    margin-top: -5px;
    text-align: left;
  }
  .time-left {
    color: $gray-darker;
    font-size: $small-font-size;
    margin-bottom: -0.5em;
    margin-top: -0.5em;
    text-align: center;
  }
  .time-left-barely {
    color: #FF6664;
  }
}
            

         

This post has been closed. No new replies can be added.

Rafi Benkual about 4 years ago

You're pretty close, to use a :hover pseudo class you need & before it.

&:hover {
    background-color: red; 
  }

http://codepen.io/rafibomb/pen/JdOZgV

Astrid Paris about 4 years ago

Thank you so much! :)