Concept Development

  • Resolved MethodMan

    (@nopopop)


    9 years, 8 months ago

    I am curious, what was your thought process in making everything muted, and then vibrant on mouseover? It is quite inventive, because many times, it is the other way around. The mouseovers make the site come to life with this design perspective.

    Also in generally, may I ask how that effect is technically created? I think it might be useful in my future designs.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Theme Author Ben Sibley

    (@bensibley)

    9 years, 8 months ago

    It’s all based on opacity. For instance, instead of changing a menu link color from gray to white like this:

    .menu-item a {
  color: #ccc;
}
.menu-item a:hover {
  color: white;
}

    Tracks instead uses opacity for the job:

    .menu-item a {
  opacity: 0.6;
  color: white;
}
.menu-item a:hover {
  opacity: 0.9;
}

    The same is applied to other elements like the posts on the homepage. By changing the opacity of the blog post as a whole, it allows the images and text to really pop.

    Not sure how I came up with it, it just sorta happened 😛

    Thread Starter MethodMan

    (@nopopop)

    9 years, 8 months ago

    Ahh. That makes so much sense. I was thinking it had to do with putting an image over the hover, but opacity makes so much sense and is an elegant solution.

    Theme Author Ben Sibley

    (@bensibley)

    9 years, 8 months ago

    Yea it can be used for some pretty neat effects 🙂

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Concept Development’ is closed to new replies.

Tags