Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- //HTML
- <div class="col-sm-4">
- <div class="au-card">
- <div class="au-card-fig">
- <a href="#"><img src="assets/images/1.jpg" alt="image"></a>
- </div>
- </div>
- </div>
- //CSS
- .au-card-fig {
- margin-bottom: 31px;
- overflow: hidden;
- position: relative;
- }
- .au-card-fig img {
- width: 100%;
- }
- .au-card-fig > a::before {
- background: rgba(255, 255, 255, 0.9) none repeat scroll 0 0;
- bottom: 0;
- content: "";
- left: 50%;
- opacity: 1;
- position: absolute;
- right: 50%;
- top: 0;
- }
- .au-card-fig > a::after {
- background: rgba(255, 255, 255, 0.9) none repeat scroll 0 0;
- bottom: 50%;
- content: "";
- left: 0;
- opacity: 1;
- position: absolute;
- right: 0;
- top: 50%;
- }
- .au-card:hover .au-card-fig > a::after {
- bottom: 0;
- opacity: 0;
- top: 0;
- transition: all 500ms ease-in 0s;
- }
- .au-card:hover .au-card-fig > a::before {
- left: 0;
- opacity: 0;
- right: 0;
- transition: all 900ms ease-in 0s;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement