Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- #blah - id of that image
- #blah{ -webkit-transition: all .2s ease-in-out; }
- #blah:hover { -webkit-transform: scale(1.1);}
- <div class="cont">
- <div class="img" style="background-image: url('http://good-morning.no/wp-content/uploads/2014/03/thumb1.jpg')"></div>
- </div>
- <div class="cont">
- <div class="img" style="background-image: url('http://good-morning.no/wp-content/uploads/2014/03/thumb2.jpg')"></div>
- </div>
- .cont{
- width: 360px;
- height: 360px;
- overflow: hidden;
- background-color: #000;
- display:inline-block;
- cursor: pointer;
- }
- .cont:active {
- opacity: 0.65;
- }
- .cont:active {
- -webkit-transform: scale(0.98);
- }
- .img {
- width: 480px;
- height: 480px;
- -webkit-transition: scale .4s ease-in-out;
- -webkit-transition: translate 1s ease-in-out;
- -webkit-transition: opacity .2s ease-in-out;
- opacity: 0.65;
- }
- .img:hover {
- -webkit-animation: anim 5s 1 ease-out forwards;
- opacity: 1.0;
- }
- @-webkit-keyframes anim {
- 12% { -webkit-transform: scale(1.1) translate(-10px, -10px) }
- 100% { -webkit-transform: translate(-30px, -30px) scale(1.1) }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement