<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="" content="">
<title></title>
<style type="text/css" media="all">
* {
margin: 0;
padding: 0;
border-radius: 10px;
box-sizing: border-box;
}
body {
background: black;
min-height: 100vh;
max-width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
.main {
height: 30px;
width: 30px;
background: red;
border-radius: 10px;
position: relative;
transition-duration: .7s;
}
.main div{
width: 100%;
height: 100%;
min-height: 100%;
min-width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: aqua;
transition-duration: 2s;
word-wrap: break-word;
}
.main img{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.name, .Contact, .About, .Email{
position: absolute;
top: 0;
left: 0;
}
.main:hover > .name{
width: auto;
transform: translateY(-120px) rotate(360deg);
}
.main:hover > .Contact{
width: auto;
transform: translateX(-120px) rotate(360deg);
}
.main:hover > .About{
width: auto;
transform: translateX(120px) rotate(360deg);
}
.main:hover > .Email{
transform: translateY(120px) rotate(360deg);
width: auto;
}
.main:hover{
height: 100px;
width: 100px;
transform: rotate(360deg);
}
</style>
</head>
<body>
<div class="main">
<div class="name">
<h3>Name</h3>
<p>
Allu Arjun
</p>
</div>
<div class="About">
<h3>About</h3>
<p>
Allu Arjun is a south super star
</p>
</div>
<div class="Contact">
<h3>Contact</h3>
<p>
123456789
</p>
</div>
<div class="Email">
<h3>Email</h3>
<p>
codeshala@gmail.com
</p>
</div>
<img src="alluArjun.jpg" alt="Your photo" />
</div>
</body>
</html>
Comments
Post a Comment