Css Image Hover Effects – Zoom in Zoom Out Hover Effects

Css Image Hover Effects – Zoom in Zoom Out Hover Effects

Html


<div class="box">
    <div class="figure">
        <img src="image.jpg">
        <div class="caption">
            <div class="about">
                <h2>Image Hover Effects</h2>
                <p>Lorem ipsum dolor sit amet, ea quis illum ius. Te eius luptatum accusamus mei. Dicit errem eos et, at pri vidit perfecto. Quo nonumy propriae ne, ius et alii nostro voluptaria. Ad eam vivendo molestie.</p>
            </div>
        </div>
    </div>
</div>

CSS

body
{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    background: #262626;
}
.box
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 500px;
    height: 500px;
    background: #00bcd4;
    overflow: hidden;
}
.figure
{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.figure img
{
    width: 100%;
    transition: .5s;
}
.box:hover .figure img
{
    transform: scale(0);
}
.caption
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #e91e63;
    transform: scale(2);
    opacity: 0;
    transition: .5s;
}
.box:hover .caption
{   
    transform: scale(1);
    opacity: 1;
}
.about
{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 40px;
    box-sizing: border-box;
    text-align: center;
}
.about h2
{
    color: #fff;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    font-size: 30px;
}
.about p
{
    color: #fff;
    margin: 20px 0 0;
    padding: 0;
    font-size: 16px;
}

See Demo

Comments (1)

  • Muhammad

    Muhammad

    Great Work

Leave a Comment