ads_header

Home HOVER HTML CSS Image Hover CSS Effects VIEWS

Image Hover CSS Effects

May 22, 2019
Read


Preview



Okay, on this occasion I will make a hover effect on an image. So this tutorial we will learn to create a rotation effect accompanied by a caption on an image when highlighted by the mouse pointer or by the term Hover





First create a project folder, and create the index.html and style.css files in it, and include one image in landscape mode. When finished, open index.html and enter the following code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Menu Hover Effect</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="box">
        <div class="model">
            <img src="img.jpg">
            <div class="caption">
                <div class="about">
                    <h2>Image Hover Effect</h2>
                    <p>There are many variations of passages of Lorem Ipsum available, but the
                        majority have suffered alteration in some form, by injected humour, 
                        or randomised words which don't look even slightly believable.
                    </p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Open the style.css then enter the following code

body
{
    margin: 0;
    padding: 0;
    background: #f5f5f5;
    font-family: 'Roboto',sans-serif;
}
.box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 700px;
    height: 375px;
    background: #000;
    overflow: hidden;
}
.model{
    width: 100%;
    height: 100%;
}
.model img{
    width: 100%;
    transition: .5s;
}
.box:hover .model img{
    transform: rotate(-10deg) scale(1.3);
    opacity: .5;
}

.caption{
    position: absolute;
    top: 40px;
    left: 40px;
    bottom: 40px;
    right: 40px;
}
.caption:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    box-sizing: border-box;
    transition: .5s;
    transform: scale(0,1);
}
.box:hover .caption:before{
    transform: scale(1,1);
}

.caption:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    box-sizing: border-box;
    transition: .5s;
    transform: scale(1,0);
}
.box:hover .caption:after{
    transform: scale(1,1);
}

.about{
    text-align: center;
    transform: scale(0,1);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    padding: 20px;
    transition: .5s;
}
.about h2{
    color: #fff;
    margin: 0;
    padding: 0;
    font-size: 30px;
    text-transform: uppercase;
}
.about p{
    color: #fff;
    margin: 20px 0 0;
    padding: 0;
    font-size: 16px;
}

Save all files, and run index.html
Tags :
Powered by Blogger.