Menu icon Foundation
Issue with Expanding Hover Columns

in foundation 6.5.1. I have tried to add the html/css via copy for the Expanding Hover Columns.  and added them to the index.html and app.css of the clean setup of 6.5.1    this code does not work, it takes the sample images and stacks them top to bottom on the page.   what am I missing?

http://www.bowlskis.com/bowlskis/2019/home.html   

 

zurb 6.5.1 expanding hover columns

in foundation 6.5.1. I have tried to add the html/css via copy for the Expanding Hover Columns.  and added them to the index.html and app.css of the clean setup of 6.5.1    this code does not work, it takes the sample images and stacks them top to bottom on the page.   what am I missing?

http://www.bowlskis.com/bowlskis/2019/home.html   

 

Rafi Benkual 7 months ago

The example may be using the older flex grid. You can change the classes to the XY grid and it should work the same.

Robert Coalter 7 months ago

<div class="grid-container">

      <div class="grid-x grid-padding-x">
        <div class="large-12 cell">

<div class="row expand-column-wrapper">
  <div class="column">
    <p class="expand-column-content">Hello there.</p>
  </div>
  <div class="column">
    <p class="expand-column-content">If you hover</p>
  </div>
  <div class="column">
    <p class="expand-column-content">over each section</p>
  </div>
  <div class="column">
    <p class="expand-column-content">a couple of words</p>
  </div>
  <div class="column">
    <p class="expand-column-content">will appear</p>
  </div>
</div>

	</div>
       </div>

</div>

this is the html within a grid copied from foundation... and the app.css has been copied from the code on the website as well. 

confused...

 

Rafi Benkual 7 months ago

This is the right component? https://foundation.zurb.com/building-blocks/blocks/expand-column.html

You'll need to convert the old grid to the new grid.

So something like this:

https://codepen.io/rafibomb/pen/RvGqgb?editors=1100

Robert Coalter 7 months ago

that is the proper component.   I have not been able to get your other code to work.  this is the first site we have worked on with the newest grid / foundation version and this particular building block so we are behind the curve right now.  thanks.