CSS Image Hover Effects – Zoom in Zoom Out Hover Effects

Hey there, I'm SA!

You can see all the codes (along with many more awesome options) by dates, and category filter in SA Coding Store !

CSS Image Hover Effects – Zoom in Zoom Out Hover Effects

HTML Code Here :

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="UTF-8">
    <meta charset="UTF-8">
    <title>Css Image Hover Effects – Zoom in Zoom Out Hover Effects </title>
</head>
<body>
    <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>
</body>
</html>

CSS Code Here :

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;
}

Hey there, I'm SA!

Technology

CSS Image Hover Effects – Zoom in Zoom Out Hover Effects

CSS Image Hover Effects – Zoom in Zoom Out Hover Effects

HTML Code Here :

CSS Code Here :

About SA

Archive

Author Info

Video Of Day