Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Justin Esders
Justin Esders
9,154 Points

JQuery Hover Effect

I was checking for cool hover effects and I came across this site. [http://www.indianawines.org/] I was wondering how to perform this hover effect on the logo. Is their 2 divs and one is hidden or how do they accomplish this

2 Answers

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Justin,

It uses css transitions.

This was the markup they used:

<div class="logo">
    <a href="/">
        <div class="msg">To Home</div>
        <img src="/images/header/logo.png">
    </a>
</div>

The image transition is opacity only. It went from 1 to 0.25.

"To Home" has its opacity and position transitioned. It was absolutely positioned near the top of the logo with zero opacity and then moved to the center while opacity goes up to 1.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Here's a codepen demo so you can experiment on your own.

http://codepen.io/anon/pen/cfbsx

It's not the exact same code as the site uses. I only made a rough approximation after looking at their site. It gives you the basic idea though.

Ali M Malik
Ali M Malik
33,293 Points
Ali M Malik
Ali M Malik
33,293 Points

I actually believe this is done in css. You can see it in the source code.

The html 

<div class="logo">
    <a href="/">
        <div class="msg">To Home</div>
        <img src="/images/header/logo.png" />
    </a>
</div>

The css

#navi {
    padding-bottom: 20px;
    padding-top: 40px;
    z-index: 10;
}

#navi .logo {
    float: left;
    height: 1px;
    overflow: visible;
    width: 25.3%;
}

#navi .logo a {
    background: #fff;
    display: block;
    border-radius: 999px;
    box-shadow: 0 4px 0 rgba(0,0,0,0.2);
    position: relative;
}

#navi .logo a:hover {
    color: #f26522;
}

#navi .logo a:hover img {
    opacity: 0.25;
}

#navi .logo a:hover .msg {
    opacity: 1;
    top: 45%;
}

#navi .logo .msg {
    font-family: 'MenschBold', sans-serif;
    font-size: 33px;
    line-height: 30px;
    left: 0;
    right: 0;
    opacity: 0;
    position: absolute;
    top: 30px;
    text-align: center;
    z-index: 1;
    transition: all .4s ease;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
}

#navi .logo img {
    display: block;
    max-width: 100%;
}

#navi .logo_s {
    display: block;
    text-align: center;
}

#navi .logo_s img {
    margin: 0 auto;
    max-width: 100%;
}

.lte8 #navi .logo a {
    background: none;
}

.lte8 #navi .logo .msg {
    display: none;
}