Hover on image.
<!doctype html>
<html>
<head>
<title>Css Image Hover Effects</title>
<link rel="stylesheet" type="text/css" href="imagehover.css">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-9378326636860315",
enable_page_level_ads: true
});
</script>
<style type="text/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;
}
</style>
</head>
<body>
<div class="box">
<div class="figure">
<img src="image.gif">
<div class="caption">
<div class="about">
<h2>We Welcome you to our site.</h2>
<p>
Name:Rahul Gupta
</p>
<p>
Specilist in.............
</p>
</div>
</div>
</div>
</div>
<body>
</html>