Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /*
- To change this license header, choose License Headers in Project Properties.
- To change this template file, choose Tools | Templates
- and open the template in the editor.
- */
- /*
- Created on : 2018.02.21., 9:10:44
- Author : Rendszergazdai
- */
- body{
- margin: 0;
- padding: 0;
- font-family: 'calibri';
- }
- .pic_grid{
- list-style-type: none;
- margin: 0 auto;
- padding: 20px;
- width: 1000px;
- }
- .pic_crop{
- display: inline-block;
- overflow: hidden;
- padding: 0 !important;
- margin: 0 !important;
- }
- .pic_grid li{
- width: 400px;
- position: relative;
- display: inline-block;
- perspective: 1000px;
- perspective-origin: 0 50%;
- }
- .pic_grid li div img{
- width: 100%;
- height: 100%;
- position: relative;
- transition: .6s ease;
- margin: 0;
- padding: 0;
- }
- .pic_grid li div div{
- position: absolute;
- top: 0;
- left: 0;
- text-align: center;
- background-color: rgb(51, 51, 51);
- width: 50%;
- height: 94%;
- opacity: 1;
- transition: .3s linear;
- padding-top: 10px;
- transform-origin: 0 0;
- transform: rotateY(-90deg);
- }
- .pic_grid li div div h4{
- color: white;
- font-size: 22pt;
- margin-bottom: 0px;
- font-weight: normal;
- margin-top: 0;
- }
- .pic_grid li div div span{
- color: rgb(232, 13, 93);
- font-size: 13pt;
- padding: 0px;
- }
- .pic_grid li div div a{
- display: inline-block;
- text-decoration: none;
- background-color: rgb(232, 13, 93);
- padding: 0px 10px;
- font-size: 15pt;
- color: white;
- cursor: pointer;
- }
- .pic_grid li div:hover img{
- transform: translateX(25%);
- }
- .pic_grid li div:hover div{
- transform: rotateY(0deg);
- }
- <body>
- <ul class="pic_grid">
- <li>
- <div>
- <span class="pic_crop">
- <img src="img/1.png" alt="Long Shadow Icon">
- </span>
- <div>
- <h4>Camera</h4>
- <span>by Jacob Cummings</span>
- <a href="#">Take a look</a>
- </div>
- </div>
- </li>
- </ul>
- </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement