CSS3 Hover Effects

CSS3 Hover Effects

by Nirvanachain

HTML

<div class="main">
    <div class="view">
        <img src="http://placecage.com/200/200" alt="nicolas cage" />
        <div class="mask">
            <h2>Hover Title</h2>
            <p>Lorem ipsum opsem et zel lorem tu opta ipsum.</p>
            <a href="">Read more...</a>
        </div>
    </div>
</div>

CSS

body {background-color: lightblue;}

.main {
    position: relative;
    width: 200px;
    margin: 0 auto;
}

.view {
    width: 200px;
    height: 200px;
    margin: 10px;
    border: 10px solid #fff;
    overflow: hidden;
    text-align: center;
    box-shadow: 1px 1px 2px #efefef;
    background: #fff;
    position: relative;
}

img {
    display: block;
    position: relative;
    transition: all 0.2s linear;
}

.mask {
    width: 200px;
    height: 200px;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    opacity: 0;
    background-color: rgba(219, 127, 8, 0.7);
    transition: all 0.4s ease-in-out;
}

h2 {
    transform: translateY(-100px);
    opacity: 0;
    transition: all 0.2s ease-in-out;
}

p {
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.2s linear;
}

a {
    opacity: 0;
    transition: all 0.2s ease-in-out;    
}

.view:hover img {
    transform: scale(1.1);
}

.view:hover .mask {
    opacity: 1;
}

.view:hover h2,
.view:hover p,
.view:hover a {
    opacity: 1;
    transform: translateY(0px);
}

.view:hover p {
    transition-delay: 0.1s;
}

.view:hover a {
    transition-delay: 0.2s
}

JavaScript

/**
* aweome hover effects
* http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/
*/