css slow zoom in animation

give a bit of extra interest to otherwise static images

HTML

<div class='image-zoom'></div>

CSS

.image-zoom {
  width: 100%;
  float: left;
  position: relative;
  background: #000000;
  overflow: hidden;
  height: 500px
}
.image-zoom:before {
  background:linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ), url(https://kruxor.com/images/pexels-photo-709552.jpg) no-repeat center;
  content: "";
  display: inline-block;
  height: 100%;
  opacity: 1;
  position: absolute;
  top: 0;
  width: 100%;
  /*z-index: -1;*/
  animation: 30s ease 0s normal none infinite running zoomin;
  -webkit-animation: 30s ease 0s normal none infinite running zoomin;
  -o-animation: 30s ease 0s normal none infinite running zoomin;
  -moz--o-animation: 30s ease 0s normal none infinite running zoomin;
}

@keyframes zoomin {
    0% { transform: scale(1.5, 1.5) }
    50% { transform: scale(1, 1) }
    100% { transform: scale(1.5, 1.5) }
}

Other Items in css

No Items Found.

Add Comment
Type in a Nick Name here
 
Page Views

This page has been viewed 160 times.

Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

โค๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ•น

Random Quote
Even if you fall on your face, you're still moving forward.
Victor Kiam