<head>
<title>demo</title>
<style>
.outer{position: relative;overflow: hidden;transition: 0.5s all ease;max-width: 400px;margin:0 auto;}
.outer img{width: 100%;}
.over{position: absolute;width: 0;height: 0;background-color: rgba(255,255,255,0.5);transition: 0.5s all ease;opacity: 1;}
.over1{left:0;top: 0;}
.over2{right:0;top: 0;}
.over3{left:0;bottom: 0;}
.over4{right:0;bottom: 0;}
.outer:hover .over{width: 100%;height: 100%;transition: 0.5s all ease;opacity: 0.5;}
</style>
</head>
<body>
<div class="outer">
<img src="image/bitcoin1.jpg">
<div class="over over1"></div>
<div class="over over2"></div>
<div class="over over3"></div>
<div class="over over4"></div>
</div>
</body>
</html>
No comments:
Post a Comment