Menu icon Foundation
Hover Animated Service Block

In Building Blocks there is a lovely bit of css/html called "Hover Animated Service Block" which is very nice. Unfortunately, I live in IE8 and it uses "transitions" - which are not supported and to my knowledge none of the existing shims/shivs overcome this issue. Does anyone in Zurbland know of any related javascripting that I might be able to do that would somewhat replicate the behavior. This is NOT my code but rather than on the Building Blocks but I am putting it here so you would not have to look for it under that section. I've searched using terms like "javascript transitions", "jquery transitions", and every permutation thereof. Found some really nice transitions information - but none of them are doing this hover/slideup to reveal hidden content/return when not hovering effect. Everything seems to be sliding in from one direction or another and is primarily focused on images and not text boxes like the item in Building Blocks. Even if you just know of pages that do this or people who are experts on this type of javascripting that I could perhaps look up their sites/books/etc., I would be grateful. Thanks! Below is the CSS first and then the HTML. In my testing I even modified the HTML to just use the Foundation blocks and unordered list layout for the divs and it worked beautifully in Chrome, Firefox and IE11. Just no go in 8 because it doesn't support transitions.

CSS
.service {
  width: 100%;
  height: 320px;
  margin: 80px 0;
  text-align: center;
  border: 1px solid #ddd;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease; }
  .service .service-icon-box {
    position: relative;
    top: 100px;
    display: inline-block;
    margin-bottom: 40px;
    padding: 10px;
    background: white;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease; }
  .service .service-heading {
    position: relative;
    top: 80px;
    -webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55); }
  .service .service-description {
    width: 80%;
    margin: 0 auto;
    opacity: 0;
    -webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0); }
  .service .service-icon-box > img.service-icon {
    width: 40px; }
  .service:hover {
    border-color: #00a8ff; }
  .service:hover .service-icon-box {
    top: -30px; }
  .service:hover .service-heading {
    top: -30px; }
  .service:hover .service-description {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1); }
    
    
    
    HTML
    <div class="row">
  <div class="small-6 small-centered columns">
    
    <div class="service">
      <div class="service-icon-box">
        <img src="https://upload.wikimedia.org/wikipedia/en/thumb/5/5a/SpaceX_CRS-3.png/360px-SpaceX_CRS-3.png" alt="" class="service-icon">
      </div>
      <h4 class="service-heading">Interstellar Travel</h4>
      <p class="service-description">It has been a very busy few months for the Project Voyager team. But the fruits of labor are finally starting to pay off. We have officially succeed at creating orbital insertions within an accuracy of 1km.</p>
    </div>
    
  </div>
</div>

            

         

ie 8transitionsjavascript for transitionsbulding blockscss animation

In Building Blocks there is a lovely bit of css/html called "Hover Animated Service Block" which is very nice. Unfortunately, I live in IE8 and it uses "transitions" - which are not supported and to my knowledge none of the existing shims/shivs overcome this issue. Does anyone in Zurbland know of any related javascripting that I might be able to do that would somewhat replicate the behavior. This is NOT my code but rather than on the Building Blocks but I am putting it here so you would not have to look for it under that section. I've searched using terms like "javascript transitions", "jquery transitions", and every permutation thereof. Found some really nice transitions information - but none of them are doing this hover/slideup to reveal hidden content/return when not hovering effect. Everything seems to be sliding in from one direction or another and is primarily focused on images and not text boxes like the item in Building Blocks. Even if you just know of pages that do this or people who are experts on this type of javascripting that I could perhaps look up their sites/books/etc., I would be grateful. Thanks! Below is the CSS first and then the HTML. In my testing I even modified the HTML to just use the Foundation blocks and unordered list layout for the divs and it worked beautifully in Chrome, Firefox and IE11. Just no go in 8 because it doesn't support transitions.

CSS
.service {
  width: 100%;
  height: 320px;
  margin: 80px 0;
  text-align: center;
  border: 1px solid #ddd;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease; }
  .service .service-icon-box {
    position: relative;
    top: 100px;
    display: inline-block;
    margin-bottom: 40px;
    padding: 10px;
    background: white;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease; }
  .service .service-heading {
    position: relative;
    top: 80px;
    -webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55); }
  .service .service-description {
    width: 80%;
    margin: 0 auto;
    opacity: 0;
    -webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0); }
  .service .service-icon-box > img.service-icon {
    width: 40px; }
  .service:hover {
    border-color: #00a8ff; }
  .service:hover .service-icon-box {
    top: -30px; }
  .service:hover .service-heading {
    top: -30px; }
  .service:hover .service-description {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1); }
    
    
    
    HTML
    <div class="row">
  <div class="small-6 small-centered columns">
    
    <div class="service">
      <div class="service-icon-box">
        <img src="https://upload.wikimedia.org/wikipedia/en/thumb/5/5a/SpaceX_CRS-3.png/360px-SpaceX_CRS-3.png" alt="" class="service-icon">
      </div>
      <h4 class="service-heading">Interstellar Travel</h4>
      <p class="service-description">It has been a very busy few months for the Project Voyager team. But the fruits of labor are finally starting to pay off. We have officially succeed at creating orbital insertions within an accuracy of 1km.</p>
    </div>
    
  </div>
</div>

            

         
Clifton Canady almost 4 years ago

@Sherry Bradford Not trying to be rude but my first question is why are you living in IE8. It is an insecure browser with vulnerabilities.

Sherry Bradford almost 4 years ago

@Clifton Canady Well, would that the world were perfect, but alas 'tis not. I work for a major airline and our corporate intranet is on IE8 - and likely will be for at LEAST another 6 months. And we are not alone in the corporate world, unfortunately. Our intranet itself could easily "flip the switch" and be on IE11 - but we host numerous applications whose interfaces will not function within IE8 - and thus we have to wait for money/time to be spent for them to change before we can do so. I'm just DELIGHTED that my little corner of the intranet at least gets to work with HTML5/CSS3 to the extent possible.