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

javascript - How to get current YouTube IDs via iMacros? -

c# - Maintaining a program folder in program files out of date? -

emulation - Android map show my location didn't work -