Home » CSS » Using CSS 3, how can I make my website logo image fade in

Using CSS 3, how can I make my website logo image fade in

By in CSS, Uncategorized, Website Design on .

Let’s assume your image has an id tag called logo in your html

<img id=”logo” src=”/img/mylogo.jpg”>

All you have to do is add this CSS to your style sheet, the duration of fade in is 3 seconds. Obviously you can set the starting opacity to 0, i.e. invisible or to something like 25%, e.g. opacity:0.25, so it is already partially visible on page load.

/* fade in  */
#logo {
animation-name: fadein;
animation-duration: 3s;

}
/* Chrome, Safari, Opera */
@-webkit-keyframes fadein{
from   {opacity: 0;    filter: alpha(opacity=40); /* IE8 version and earlier */}
to { opacity: 1;    filter: alpha(opacity=40); /* IE8 version and earlier */}
}

/* Standard syntax */
@keyframes fadein{
from  {opacity: 0;    filter: alpha(opacity=40); /* IE8 version and earlier */}
to {opacity: 1;    filter: alpha(opacity=40); /* IE8 version and earlier */}
}

This approach can be used when creating a WordPress child theme. Modify the PHP code in the header that displays the image. In WordPress 2016 theme the line to alter begins:

<img src=”<?php header_image();

Simply change this to:

<img id=”logo” src=”<?php header_image();

Add the CSS to the child’s style.css file.

Support