CSS3 powered hover effects for your logo.
Would you like to spice up a logo image on your site? Then keep reading :)
We have prepared 6 examples of a mouse-over effects that we created using purely CSS, so let's take a closer look to them.
All examples you can see on a live demo:
Example 1
In the first example you will see an animated shine effect on logo hover. The shine effect comes quickly from the left to the right side.
Support: Chrome, Firefox, Opera, Safari 6+, IE10+
HTML code
Let's take a look at html code.
<div class="jm-logo">
<a href="#">
<span> </span>
<img src="/images/logo.png" alt="Logo" />
</a>
</div>If you would like to adapt this code for your own site, you will need to edit the following lines:
1) Enter the base address for the href attribute:
<a href="#">2) Enter the logo path for the src attribute:
<img src="/images/logo.png" alt="Logo" />CSS styles:
CSS styles of the logo link:
.jm-logo a {
position: relative;
display: block;
padding: 60px;
}Position relative is needed as holder for the span tag.
CSS styles of the span tag:
.jm-logo span {
content: "";
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
max-width: 0;
background: #fff;
opacity: 0.4;
filter: alpha(opacity=40);
-webkit-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}The span tag contains styles for the shine effect. It is a semi-transparent element with max-width set to 0. The transitions are set to no, because we do not want the shine effect goes back when you leave the mouse cursor from the logo.
CSS styles of the span tag on hover:
.jm-logo a:hover span {
max-width: 100%;
background: #fff;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}On hover you need to add transitions to animate the max-width to 100% and opacity to 0. This way the shine effect goes from the left to the right side with a fade out effect.
Example 2
In the second example, we displayed a logo image on round background. On hover, the logo image is scalled to smaller size and animated border appears around.
Support: Chrome, Firefox, Safari 6.1+, IE10+
HTML code
Let's take a look at html code.
<div class="jm-logo">
<a href="#">
<img src="/images/logo.png" alt="Logo" />
</a>
</div>If you would like to adapt this code for your own site, you will need to edit the following lines:
1) Enter the base address for the href attribute:
<a href="#">2) Enter the logo path for the src attribute:
<img src="/images/logo.png" alt="Logo" />CSS styles:
CSS styles of the logo wrapper:
.jm-logo {
padding: 30px;
}CSS styles of the logo link:
.jm-logo a {
background: rgba(255,255,255,0.1);
-o-transition: -o-transform ease-out 0.1s, background 0.2s;
-ms-transition: -ms-transform ease-out 0.1s, background 0.2s;
-webkit-transition: -webkit-transform ease-out 0.1s, background 0.2s;
transition: transform ease-out 0.1s, background 0.2s;
display: inline-block;
position: relative;
z-index: 1;
padding: 30px;
border-radius: 50%;
-webkit-border-radius: 50%;
}For the logo link we added a white background with 10% opacity. We set the transition for the transform and background styles, this way the effect will run smoothly on mouse leave.
CSS styles of the logo link on hover:
.jm-logo a:hover {
background: rgba(255,255,255,0.05);
-o-transform: scale(0.93);
-webkit-transform: scale(0.93);
-ms-transform: scale(0.93);
transform: scale(0.93);
}On hover, the logo background is more transparent and it is scalled to smaller size.
CSS styles of the after element:
.jm-logo a:after {
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
content: '';
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
top: 0;
left: 0;
padding: 0;
z-index: -1;
box-shadow: 0 0 0 2px rgba(255,255,255,0.1);
-webkit-box-shadow: 0 0 0 2px rgba(255,255,255,0.1);
filter: alpha(opacity=0);
opacity: 0;
-o-transform: scale(0.9);
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
border-radius: 50%;
-webkit-border-radius: 50%;
}Using the after element we displayed a white shadow with 10% opacity. We set the opacity to 0 for the whole element to hide it, since we want to show it only on hover.
CSS styles of the after element on hover:
.jm-logo a:hover:after {
-o-animation: sonarEffect 1.3s ease-out 75ms;
-webkit-animation: sonarEffect 1.3s ease-out 75ms;
animation: sonarEffect 1.3s ease-out 75ms;
}
@-o-keyframes sonarEffect {
0% {
filter: alpha(opacity=30);
opacity: 0.3;
}
40% {
filter: alpha(opacity=50);
opacity: 0.5;
box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 0 10px rgba(255,255,255,0.3);
-webkit-box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 0 10px rgba(255,255,255,0.3);
}
100% {
box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 0 10px rgba(255,255,255,0.3);
-webkit-box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 0 10px rgba(255,255,255,0.3);
-o-transform: scale(1.2);
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
filter: alpha(opacity=0);
opacity: 0;
}
}
@-webkit-keyframes sonarEffect {
0% {
filter: alpha(opacity=30);
opacity: 0.3;
}
40% {
filter: alpha(opacity=50);
opacity: 0.5;
box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 0 10px rgba(255,255,255,0.3);
-webkit-box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 0 10px rgba(255,255,255,0.3);
}
100% {
box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 0 10px rgba(255,255,255,0.3);
-webkit-box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 0 10px rgba(255,255,255,0.3);
-o-transform: scale(1.2);
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
filter: alpha(opacity=0);
opacity: 0;
}
}
@keyframes sonarEffect {
0% {
filter: alpha(opacity=30);
opacity: 0.3;
}
40% {
filter: alpha(opacity=50);
opacity: 0.5;
box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 0 10px rgba(255,255,255,0.3);
-webkit-box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 0 10px rgba(255,255,255,0.3);
}
100% {
box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 0 10px rgba(255,255,255,0.3);
-webkit-box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 0 10px rgba(255,255,255,0.3);
-o-transform: scale(1.2);
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
filter: alpha(opacity=0);
opacity: 0;
}
}On hover, we animate the shadow using the keyframes.
Example 3
In the third example we use a wobble effect on logo hover.
Support: Chrome, Firefox, Opera, Safari 5.1+, IE10+
HTML code
Let's take a look at html code.
<div class="jm-logo">
<a href="#">
<img src="/images/logo.png" alt="Logo" />
</a>
</div>If you would like to adapt this code for your own site, you will need to edit the following lines:
1) Enter the base address for the href attribute:
<a href="#">2) Enter the logo path for the src attribute:
<img src="/images/logo.png" alt="Logo" />CSS styles:
CSS styles of the logo link:
.jm-logo a {
padding: 60px;
}CSS styles of the logo image on hover:
.jm-logo img:hover {
-webkit-animation-name: wobble-to-top-right;
animation-name: wobble-to-top-right;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
@-webkit-keyframes wobble-to-top-right {
16.65% {
-ms-transform: translate(8px, -8px);
-webkit-transform: translate(8px, -8px);
transform: translate(8px, -8px);
}
33.3% {
-ms-transform: translate(-6px, 6px);
-webkit-transform: translate(-6px, 6px);
transform: translate(-6px, 6px);
}
49.95% {
-ms-transform: translate(4px, -4px);
-webkit-transform: translate(4px, -4px);
transform: translate(4px, -4px);
}
66.6% {
-ms-transform: translate(-2px, 2px);
-webkit-transform: translate(-2px, 2px);
transform: translate(-2px, 2px);
}
83.25% {
-ms-transform: translate(1px, -1px);
-webkit-transform: translate(1px, -1px);
transform: translate(1px, -1px);
}
100% {
-ms-transform: translate(0, 0);
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}
@keyframes wobble-to-top-right {
16.65% {
-ms-transform: translate(8px, -8px);
-webkit-transform: translate(8px, -8px);
transform: translate(8px, -8px);
}
33.3% {
-ms-transform: translate(-6px, 6px);
-webkit-transform: translate(-6px, 6px);
transform: translate(-6px, 6px);
}
49.95% {
-ms-transform: translate(4px, -4px);
-webkit-transform: translate(4px, -4px);
transform: translate(4px, -4px);
}
66.6% {
-ms-transform: translate(-2px, 2px);
-webkit-transform: translate(-2px, 2px);
transform: translate(-2px, 2px);
}
83.25% {
-ms-transform: translate(1px, -1px);
-webkit-transform: translate(1px, -1px);
transform: translate(1px, -1px);
}
100% {
-ms-transform: translate(0, 0);
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}On hover, we animate the transform styles using the keyframes.
Example 4
In the fourth example, when you hover a logo it will rise up and a radial shadow will appear below the logo image.
Support: Chrome, Firefox, Opera, Safari 6.1+, IE10+
HTML code
Let's take a look at html code.
<div class="jm-logo">
<a href="#">
<span>
<img src="/images/logo.png" alt="Logo" />
</span>
</a>
</div>If you would like to adapt this code for your own site, you will need to edit the following lines:
1) Enter the base address for the href attribute:
<a href="#">2) Enter the logo path for the src attribute:
<img src="/images/logo.png" alt="Logo" />CSS styles:
CSS styles of the logo wrapper:
.jm-logo {
padding: 60px;
}CSS styles of the logo link:
.jm-logo a {
position: relative;
display: inline-block;
}CSS styles of the before element:
.jm-logo a:before {
pointer-events: none;
position: absolute;
content: '';
bottom: -30px;
left: 5%;
height: 10px;
width: 90%;
filter: alpha(opacity=0);
opacity: 0;
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
background: -webkit-radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
background: -moz-radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
background: -o-radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
-o-transition-duration: 0.3s;
-ms-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-o-transition-property: transform, opacity;
-ms-transition-property: transform, opacity;
-webkit-transition-property: transform, opacity;
transition-property: transform, opacity;
}The before element contains all styles responsible of displaying the radial shadow below the logo image. We set opacity to 0 to hide it. We want to show the shadow on hover only.
CSS styles of the before element on hover:
.jm-logo a:hover:before,
.jm-logo a:focus:before,
.jm-logo a:active:before {
filter: alpha(opacity=100);
opacity: 1;
}
On hover, we set opacity to 1, since we want to show the radial shadow below the logo image.
CSS styles of the logo span:
.jm-logo span {
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
}For the logo span we set transition for transforms. This way the logo image will be smoothly rised up on hover.
CSS styles of the logo span on hover:
.jm-logo a:hover span,
.jm-logo a:focus span,
.jm-logo a:active span {
-o-transform: translateY(-10px);
-ms-transform: translateY(-10px);
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}We use translateY style to rise up the logo for 10px. You can easily change this value to fit your needs.
Example 5
In the fifth example, we displayed a logo image on round background. On hover, we animate the background color and a round shadow appears around the logo image.
Support: Chrome, Firefox, Safari 6.1+, IE10+
HTML code
Let's take a look at html code.
<div class="jm-logo">
<a href="#">
<img src="/images/logo.png" alt="Logo" />
</a>
</div>If you would like to adapt this code for your own site, you will need to edit the following lines:
1) Enter the base address for the href attribute:
<a href="#">2) Enter the logo path for the src attribute:
<img src="/images/logo.png" alt="Logo" />CSS styles:
CSS styles of the logo wrapper:
.jm-logo {
padding: 30px;
}CSS styles of the logo link:
.jm-logo a {
display: inline-block;
position: relative;
z-index: 1;
padding: 30px;
border-radius: 50%;
-webkit-border-radius: 50%;
box-shadow: 0 0 0 4px #fff;
-webkit-box-shadow: 0 0 0 4px #fff;
}CSS styles of the after element:
.jm-logo a:after {
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
content: '';
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
border-radius: 50%;
-webkit-border-radius: 50%;
top: -2px;
left: -2px;
padding: 2px;
z-index: -1;
background: #fff;
-ms-transition: -ms-transform 0.2s, opacity 0.3s;
-o-transition: -o-transform 0.2s, opacity 0.3s;
-webkit-transition: -webkit-transform 0.2s, opacity 0.3s;
-moz-transition: -moz-transform 0.2s, opacity 0.3s;
transition: transform 0.2s, opacity 0.3s;
}Using the after element we displayed a white background. We set the transition for transforms to achieve a smooth effect on mouse leave.
CSS styles of the after element on hover:
.jm-logo a:hover:after {
-o-transform: scale(1.3);
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
filter: alpha(opacity=0);
opacity: 0;
}On hover, we use transforms to animate the background color. We set the opacity to 0 to hide the background color after transformation.
Example 6
In the sixth example we use a buzz effect on logo hover.
Support: Chrome, Firefox, Opera, Safari 5.1+, IE10+
HTML code
Let's take a look at html code.
<div class="jm-logo">
<a href="#">
<img src="/images/logo.png" alt="Logo" />
</a>
</div>If you would like to adapt this code for your own site, you will need to edit the following lines:
1) Enter the base address for the href attribute:
<a href="#">2) Enter the logo path for the src attribute:
<img src="/images/logo.png" alt="Logo" />CSS styles:
CSS styles of the logo link:
.jm-logo a {
padding: 60px;
}CSS styles of the logo image on hover:
.jm-logo img:hover,
.jm-logo img:focus,
.jm-logo img:active {
-webkit-animation-name: buzz;
animation-name: buzz;
-webkit-animation-duration: 0.15s;
animation-duration: 0.15s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@-webkit-keyframes buzz {
50% {
-ms-transform: translateX(3px) rotate(2deg);
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}
100% {
-ms-transform: translateX(-3px) rotate(-2deg);
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}
}
@keyframes buzz {
50% {
-ms-transform: translateX(3px) rotate(2deg);
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}
100% {
-ms-transform: translateX(-3px) rotate(-2deg);
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}
}On hover, we animate the transform styles using the keyframes.
Worth to mention
Please note these effects can be applied to any other image. If you have your own idea, then feel free to modify the code and CSS styles to fit your needs.
Live demoDownload sourcesDownload Free Logo