I recently redesigned my blog and when I was looking at the logo it looked quite dull. I did wanted to keep the logo simple and yet wanted to make it stand out.

Had seen those light shine effects on images but those were in videos and animations. Years ago I remember that I used to use shine.gif image which was nothing but a shiny gif with some transparency along with it. This one would overlay the existing image in order to get the shine effect.

But Nowadays it would be very primitive setup.

Anyway as you can see in the logo currently there is shine effect integrated and working with just Pure CSS.

After getting frustrated with all text animation stuff and javascript one I finally was able to reverse engineer a social button shine effect and use it for logo.

The basic idea is that you need your logo image in some kind of container.

If you don’t use container then the shine effect wont be responsive in true sense. As it messes up the screen by showing horizontal scrollbar during animation on mobile phones.

The logo image should be inside the container DIV.

And then we can start applying the CSS to those elements.

For example:

<div id="logo">
<img src="yourlogo.png">
</div>

Where “logo” is the ID of your container DIV.

For this tutorial I am assuming your logo is 250px wide x 100px tall.

#logo {
position: absolute;
top: 0;
left: 0;
width: 250px;
height: 100px;
overflow: hidden;
}

#logo img {
width: 100%;
}

Here the container has the proper width and height and the image inside it is 100% wide.

The Animation part is as below:

#logo:before {
content: '';
position: absolute;
top: 0;
left: -100px;
width: 70px;
height: 100%;
background: rgba(255,255,255, 0.3);
transform: skewX(-30deg);
animation-name: slide;
animation-duration: 7s;
animation-timing-function: ease-in-out;
animation-delay: .3s;
animation-iteration-count: infinite;
animation-direction: alternate;
background: linear-gradient(
    to right, 
    rgba(255, 255, 255, 0.13) 0%,
    rgba(255, 255, 255, 0.13) 77%,
    rgba(255, 255, 255, 0.5) 92%,
    rgba(255, 255, 255, 0.0) 100%
  );
}

Animation name is for the reference. Animation duration and delay etc you can play with to achieve the desired effects. Infinite will keep playing the animation and alternate will keep playing animation from start to end and end to start. Background is semi transparent gradient overlay block.

The animation name was defined already. So add this below

@keyframes slide {
  0% {
    left: -100;
    top: 0;
  }
  50% {
    left: 120px;
    top: 0px;
  }
  100% {
    left: 290px;
    top: 0;
  }
}

Note that the left: values you can play with. This was working for me with 250 wide logo. If you have bigger or smaller logo then try commenting out the overlay:hidden; part from the CSS and you can adjust the shine part to suit your needs. Once you are satisfied just uncomment the overlay:hidden; part.