[Resolved] Eager IO with GP

[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.

[Tom]

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);
}

[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.

[Tom]

haha, I’m glad I could help 🙂

[Author]

Posts