Home>Support>I got too know can i get the code

I got too know can i get the code

By Lonnie Ray, 10 years ago. Last reply by Andrew Misplon, 10 years ago.
Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

This is going to be strange for my first support request but i got to have it…. if i can… your logo for your site the little elephant that moves could i get a code snippet of how you did it? I would like to re-purpose it and i would give credit to you guys….

Thank You

The Teck Walker

URL: http://teckwalker.com

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 10 years, 5 months ago Andrew Misplon
    Hi, I Work Here

    Hi Teck Walker

    Thanks for reaching out.

    You’ll need a bit of a background in HTML/CSS to make use of this. If you’re using this with a WordPress theme/Vantage, please don’t forget to use a child theme.

    Here we go:

    HTML:

    <a href="https://siteorigin.com/" rel="home" id="logo">
	<span class="hover-text">home please</span>
	<img src="https://siteorigin.com/wp-content/themes/siteorigin-theme/images/logo/[email protected]" class="has-retina-image normal-logo"height="44" width="190">
	<img src="https://siteorigin.com/wp-content/themes/siteorigin-theme/images/logo/[email protected]" class="has-retina-image hover-logo" height="44" width="190">
</a>

    CSS:

    #masthead #logo {
  line-height: 0;
  position: relative;
  width: 190px;
  height: 44px;
  display: block;
  float: left;
  margin-top: -9px;
}
#masthead #logo img {
  position: absolute;
  top: 0;
  left: 0;
}
#masthead #logo .hover-text {
  opacity: 0;
  position: absolute;
  line-height: 1;
  font-family: 'Short Stack', cursive;
  font-size: 9px;
  text-indent: 0;
  color: #777777;
  text-decoration: none !important;
  left: 57px;
  bottom: 40px;
  pointer-events: none;
  -webkit-transition: all 0.35s ease;
  -moz-transition: all 0.35s ease;
  -o-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
#masthead #logo .hover-logo {
  display: none;
}
#masthead #logo:hover .hover-logo,
#masthead #logo:hover .hover-text {
  display: block;
  opacity: 1;
}
#masthead #logo:hover .normal-logo {
  display: none;
}

    I’m going to repeat a little section of CSS from above, you shouldn’t/don’t need to repeat it. This is the important bit:

    #masthead #logo .hover-logo {
  display: none;
}
#masthead #logo:hover .hover-logo,
#masthead #logo:hover .hover-text {
  display: block;
  opacity: 1;
}
#masthead #logo:hover .normal-logo {
  display: none;
}

    We’re basically hiding the hover logo and the displaying it on hover while also hiding the original on hover.

    Hope that helps.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More