Text Overlay Css Hover Effect - HTML5 - CSS3 - Ders13
HTML İÇERİĞİ:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Text Overlay Hover</title>
<link rel="stylesheet" href="style.css">
<body>
<div class="box">
<figure>
<img src="1.jpg">
<figcaption>
<h1>Tex Overlay Hover</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet,
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</figcaption>
</figure>
</div>
</body>
</head>
</html>
CSS İÇERİĞİ:
body{
margin: 0;
padding: 0;
font-family: arial;
color: #fff;
text-align: center;
background: #484848;
}
.box{
width: 400px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
overflow: hidden;
}
.box figure{
height: 100%;
margin: 0;
padding: 0;
}
.box figure img{
width: 100%;
}
.box figcaption{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 50px 20px;
z-index: 100;
opacity: 0;
transition-delay: .3s;
transition: .5s;
}
.box figcaption:hover{
opacity: 1;
}
.box figure:before,.box figure:after{
content: '';
position: absolute;
transition: .5s ease-in-out;
height: 200%;
width: 200%;
background: black;
}
.box figure:before{
right: 0;
bottom: 0;
background: rgba(0,0,255,.3);
transform: skew(45deg) translateX(100%);
}
.box figure:after{
left: 0;
top: 0;
background: rgba(255,0,0,.3);
transform: skew(-135deg) translateX(-100%);
}
.box:hover figure:before{
transform: skew(45deg) translateX(0%);
}
.box:hover figure:after{
transform: skew(-135deg) translateX(0%);
}
Yorumlar
Yorum Gönder