Black Friday Sale! Get up to $30 off GP Premium! Learn more ➝

[Resolved] Eager IO with GP

Home Forums Support [Resolved] Eager IO with GP

Home Forums Support Eager IO with GP

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #221386
    Sean

    So I’ve been toying around with Eager.io, and it really brings a website to life. I’m curious though if GP is able to do a feature from Eager using CSS. So here’s a link to a blog I’m building. If you continue to the content area, where the previews of my articles are, you’ll notice something fun when you hover over them. They grow! Now the only issue I’m having is, I have to manually add it every time I make a new article. Boooooo. So I’m wondering if it’s possible to do with the GP theme using CSS?

    Here’s what I gather, the area as a whole that can trigger the effect is as followed:

    body > .hfeed.site.grid-container.container.grid-parent > .site-content > .content-area.grid-parent.mobile-grid-100.grid-100.tablet-grid-100 > .site-main > .post-1.post.type-post.status-publish.format-standard.has-post-thumbnail.hentry.category-personal > .inside-article
    
    body > .hfeed.site.grid-container.container.grid-parent > .site-content > .content-area.grid-parent.mobile-grid-100.grid-100.tablet-grid-100 > .site-main > .post-6.post.type-post.status-publish.format-standard.has-post-thumbnail.hentry.category-personal > .inside-article

    The only difference between the two, is .post-1 vs .post-6.

    The effect is called Grow, and can be found here: http://ianlunn.github.io/Hover/#effects

    And I’m pretty sure this is the CSS for Grow:

    /* Grow */
    .hvr-grow {
      display: inline-block;
      vertical-align: middle;
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
      box-shadow: 0 0 1px rgba(0, 0, 0, 0);
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      -moz-osx-font-smoothing: grayscale;
      -webkit-transition-duration: 0.3s;
      transition-duration: 0.3s;
      -webkit-transition-property: transform;
      transition-property: transform;
    }
    .hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
      -webkit-transform: scale(1.1);
      transform: scale(1.1);
    }

    So is there a way to make it automatically do this for every article? I’m sure it’s super complicated, and probably realistically is, but requires a lot more knowledge than what I’m tea-spooning together to try and hack it together.

    #221397
    Tom
    Lead Developer
    Lead Developer

    You could probably do something like this:

    .blog .inside-article,
    .archive .inside-article {
      display: inline-block;
      vertical-align: middle;
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
      box-shadow: 0 0 1px rgba(0, 0, 0, 0);
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      -moz-osx-font-smoothing: grayscale;
      -webkit-transition-duration: 0.3s;
      transition-duration: 0.3s;
      -webkit-transition-property: transform;
      transition-property: transform;
    }
    
    .blog .inside-article:hover,
    .blog .inside-article:focus,
    .blog .inside-article:active,
    .archive .inside-article:hover,
    .archive .inside-article:focus,
    .archive .inside-article:active {
      -webkit-transform: scale(1.1);
      transform: scale(1.1);
    }
    #221399
    Sean

    Every time I tried messing with it, it made the article itself do the effect too. I couldn’t find the middle ground.

    That totally works flawlessly. I don’t think you’re actually human.

    #221403
    Tom
    Lead Developer
    Lead Developer

    haha, I’m glad I could help 🙂

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.