Image hover descriptions

In the last few days I have been playing around with CSS3 transforms and transitions for use in an image gallery I’m been working on. I came up with a cool way to keep the gallery looking clean and minimal, while giving the user some extra into about the image when they hover. This effect has been done plenty of times before but often obscures the image while the description is shown, which I feel defeats the purpose of an image gallery, the image should be the main focus after all.

Demo

By using transitions we make it obvious to the user where the extra info is coming from, and thus what it is related to. I am a firm believer that animations are a very important part of the user experience. They give context about what’s going on and act as a kind of feedback. Sometimes people might not be paying complete attention to the screen and don’t see where the mouse goes to bring these new elements onto the screen. By sliding, scaling, rotating, whatever, the elements take on a more realistic sense of physics (when was the last time you saw something appear out of nowhere?) which helps put the user in a more natural and comfortable state of mind.

I’ve included a few different effect that can be used for this hover technique, but there are probably many other combinations of CSS styles that could be combined to create cool effects. Just be careful to make sure that the info will be fully visible when it is displayed and doesn’t fall off the side of the screen or behind other elements. All of the markup for each thumbnail is contained within a single anchor tag and can easily be used with a light-box plugin to display the larger images in all their detail.

The HTML.

<div id="wrapper">
    <nav>
        <ul>
            <li><a id="link1" href="#"><span class="imgInfo"><div><h4>Autumn</h4><p>When the leaves begin to fall.</p></div></span><span class="coverImg"></span></a></li>
            <li><a id="link2" href="#"><span class="imgInfo"><div><h4>Winch</h4><p>Raising the anchor.</p></div></span><span class="coverImg"></span></a></li>
            <li><a id="link3" href="#"><span class="imgInfo"><div><h4>Apple blossom</h4><p>Bringing new fruit.</p></div></span><span class="coverImg"></span></a></li>
            <li><a id="link4" href="#"><span class="imgInfo"><div><h4>Lake Dam</h4><p>Changing the landscape.</p></div></span><span class="coverImg"></span></a></li>
            <li><a id="link5" href="#"><span class="imgInfo"><div><h4>Firework flower</h4><p>An explosion of colour.</p></div></span><span class="coverImg"></span></a></li>
            <li><a id="link6" href="#"><span class="imgInfo"><div><h4>Pine forrest</h4><p>Casting amazing shadows.</p></div></span><span class="coverImg"></span></a></li>
        </ul>
    </nav>
</div>

The CSS.

#wrapper {
    max-width: 1200px;
    min-width: 400px;
    width: 95%;
    margin: 0 auto;
    box-shadow: 0 0 10px 5px rgba(0,0,0,0.9);
    overflow: auto;
    text-align: center;
}
nav ul {
    padding-bottom: 225px;
    overflow: auto;
}
nav ul li {
    display: inline-block;
    margin: 2em;
    text-align: left;
}
nav ul li a {
    width: 300px;
    height: 225px;
    display: block;
    position: relative;
    color: #00006c;
    -webkit-perspective: 1200px;
    -moz-perspective: 1200px;
    perspective-origin: 1200px;
    -webkit-perspective-origin: center;
    -moz-perspective-origin: center;
    perspective-origin: center;
}
nav ul li a .imgInfo,
nav ul li a .coverImg {
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    transform-origin: 100% 100%;
    transition: all 0.3s;
}
nav ul li a .coverImg {
    backface-visibility: hidden;
}
nav ul li a .imgInfo div {
    padding: 5%;
    height: 85%;
    background-color: #fff;
    border: 1px solid #333;
    -webkit-font-smoothing: subpixel-antialiased;
}
nav ul li a:hover .coverImg,
nav ul li a:hover .imgInfo {
    transition: all 0.8s;
}
    nav ul li a#link1 .imgInfo div {
        transform: rotateX(180deg);
    }
    nav ul li a#link1:hover .coverImg,
    nav ul li a#link1:hover .imgInfo {
        transform: rotateX(-180deg);
    }
        nav ul li a#link2 .imgInfo div {
            opacity: 1;
        }
        nav ul li a#link2 .coverImg {
            transition: transform 0.8s linear 0.3, opacity 0.3s ease-out 0s;
        }
        nav ul li a#link2:hover .coverImg,
        nav ul li a#link2:hover .imgInfo {
            transform: translate(0,100%);
        }
        nav ul li a#link2:hover .coverImg {
            transition: transform 0.8s, opacity 0.3s ease-out 0.8s;
            opacity: 0;
        }
            nav ul li a#link3 .coverImg {
                backface-visibility: hidden;
            }
            nav ul li a#link3 .imgInfo div {
            }
            nav ul li a#link3:hover .imgInfo {
                transform: translate(0, 100%);
            }
                nav ul li a#link4 .coverImg {
                    backface-visibility: hidden;
                }
                nav ul li a#link4 .imgInfo {
                    opacity: 0;
                    transition: opacity 0.5s;
                }
                nav ul li a#link4 .imgInfo div {
                }
                nav ul li a#link4:hover .imgInfo {
                    transform: translate(0, 100%);
                    opacity: 1;
                }
                    nav ul li a#link5 .imgInfo,
                    nav ul li a#link5 .coverImg {
                        transform-origin: 50% 100%;
                    }
                    nav ul li a#link5 .imgInfo div {
                        transform: rotateZ(180deg);
                    }
                    nav ul li a#link5:hover .imgInfo {
                        transform: rotateZ(180deg);
                    }
                        nav ul li a#link6 .imgInfo {
                            transform: rotateX(80deg);
                        }
                        nav ul li a#link6 .imgInfo div {
                            transform: rotateX(180deg);
                        }
                        nav ul li a#link6:hover .imgInfo {
                            transform: rotateX(180deg);
                        }
#link1,
#link1 .coverImg {
    background: url("../img/autumn-thumbnail.jpg") no-repeat 0 0;
    background-size: contain;
    z-index: 10;
}
#link2,
#link2 .coverImg {
    background: url("../img/anchor-winch-thumbnail.jpg") no-repeat 0 0;
    background-size: contain;
    z-index: 9;
}
#link3,
#link3 .coverImg {
    background: url("../img/apple-blossom-thumbnail.jpg") no-repeat 0 0;
    background-size: contain;
    z-index: 8;
}
#link4,
#link4 .coverImg {
    background: url("../img/dam-thumbnail.jpg") no-repeat 0 0;
    background-size: contain;
    z-index: 7;
}
#link5,
#link5 .coverImg {
    background: url("../img/firework-flower-thumbnail.jpg") no-repeat 0 0;
    background-size: contain;
    z-index: 6;
}
#link6,
#link6 .coverImg {
    background: url("../img/pine-forest-thumbnail.jpg") no-repeat 0 0;
    background-size: contain;
    z-index: 5;
}

If you have any more ideas on this topic or cool effects that you have made, please leave a comment below with the details.

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>