0

This is css code for the banner that I have on my website I wanna add png image on top of this banner that should animate nicely ( like zoom in-out ) ( like a heartbeat )

https://www.gettwitterretweet.com/css/images/social.png (png image )

.product-page {
  background: url('../img/people.jpg') repeat;
  background-size: cover;
  border-bottom: none !important;
  background-attachment: fixed;
  padding: 80px 0;
}
Roman Pokrovskij
  • 9,449
  • 21
  • 87
  • 142
Krish cj
  • 1
  • 2

2 Answers2

2

you can do this way check this solution just you need to update the background image where I used the background color

.product-page {
padding: 50px;
background-color: green; 
/* background: url('../img/people.jpg') repeat; */ 
transition: transform .2s; /* Animation */
width: 200px;
height: 200px;
margin: 0 auto;
background-size: cover;
border-bottom: none !important;
background-attachment: fixed;
padding: 80px 0;
}

.product-page:hover {
    transform: scale(1.5);
}
<div class="product-page"></div>
Shakil Hossain
  • 1,701
  • 13
  • 25
0

Try this you can manage the duration how much you want.

@keyframes zoominout {
    0% {
        transform: scale(1,1);
    }
    50% {
        transform: scale(1.1,1.1);
    }
    100% {
        transform: scale(1,1);
    }
}

.wrapper img {
 animation: zoominout 1s infinite ;
}
<div class="wrapper"><img class="image" src="https://www.gettwitterretweet.com/css/images/social.png"></div>
Mehraj Khan
  • 927
  • 6
  • 17
  • i used this code but i like your code as well thank for the help .product-page:before,.product-page:after{ content: ""; display: block; width: 100%; height: 510px; position: absolute; top: 5px; animation-name: stretch; animation-duration: 1.4s; animation-timing-function: ease-out; animation-delay: 0.1s; animation-direction: alternate; animation-iteration-count: infinite; animation-fill-mode: none; animation-play-state: running; } @keyframes stretch { 0% { transform: scale(.98); } – Krish cj Oct 17 '18 at 20:40
  • @Krish cj If my code is useful to you upvote my answer :) – Mehraj Khan Oct 18 '18 at 06:01