css - How to create a shiny effect on an image (logo) -


i found solutions expecting, on div elements. tried apply images no success. there idea how add shiny effect on png image? example: http://jsfiddle.net/nqqc7/289/

because img tag doesn't pseudo elements, you'll need use wrapper element , absolutely position img within it. this demo shows, shown below:

.wrap {    display: inline-block;    height: 200px;    width: 200px;    position: relative;    overflow: hidden;  }  .wrap img {    position: absolute;    top: 0;    left: 0;    height: 100%;    width: 100%;  }  .wrap:before {    content: "";    z-index: 10;    position: absolute;    height: 200%;    width: 200%;    top: -120%;    left: -120%;    background: linear-gradient(transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%);    transition: 2s;    transform: rotate(-45deg);    animation: shine 6s infinite forwards;  }  @keyframes shine {    0% {      top: -120%;      left: -120%;    }    20% {      left: 100%;      top: 100%;    }    40% {      left: 100%;      top: 100%;    }    100% {      left: 100%;      top: 100%;    }  }
<div class="wrap">    <img src="http://placehold.it/200/200" />    <div>


Comments

Popular posts from this blog

Load Balancing in Bluemix using custom domain and DNS SRV records -

oracle - pls-00402 alias required in select list of cursor to avoid duplicate column names -

python - Consider setting $PYTHONHOME to <prefix>[:<exec_prefix>] error -