[css] anas
Viewer
- * {
- margin: 0;
- padding: 0;
- box-sizing:border-box;
- }
- body {
- width: 100%;
- height: 100vh;
- background-color:#000;
- display:grid;
- place-items:center;
- }
- img {
- width: 30%;
- height: 100%;
- object-fit:cover;
- -webkit-box-reflect:below 2px linear-gradient(transparent, transparent, #0004);
- transform-origin:center;
- transform:perspective(800px) rotateY(25deg);
- transition:0.5s;
- }
- .container {
- max-width:600px;
- max-height:350px;
- display:flex;
- justify-content:center;
- align-items:center;
- gap:20px;
- }
- .container:hover img {
- opacity:0.3;
- }
- .container img:hover {
- transform:perspective(800px) rotateY(0deg);
- opacity:1;
- }
Editor
You can edit this paste and save as new: