Make logo change on hover

Site URL: https://www.startupvillage.nl/

Hello, on my site I'm having some issues making my header logo change to a different image when the logo is hovered over. 

https://www.startupvillage.nl/

I have tried following tutorials from here and here with, pasting code into the Custom CSS, with no results. I think perhaps the main confusion is that in my Custom CSS there is no reference to .header-title-logo

If someone could help me figure 1. which code to insert, and 2. where to insert it on the Custom CSS, that would be greatly appreciated!

.header-title-logo a:hover img {
  visibility: hidden;
}
.header-title-logo a:hover {
  background-image: url('https://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5f2292c9d3288d283c2af685/1596101322262/black+backgroun+logo.png');
  background-size: contain;
}

7 minutes ago, rwp said:

.header-title-logo a:hover img {
  visibility: hidden;
}
.header-title-logo a:hover {
  background-image: url('https://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5f2292c9d3288d283c2af685/1596101322262/black+backgroun+logo.png');
  background-size: contain;
}

 

Thanks, but it still is not working. Should I insert this in my Custom CSS or in Code Injection?

Css

15 minutes ago, rwp said:

Css

Here is what the my CSS looks like for my Navigation section (all the other sections are for specific pages.) No matter where I put that code it there is no effect. Do you know where I should paste it?

/* --- NAVIGATION --- */
#header > div.header-announcement-bar-wrapper > div > div.header-display > div.header-title-nav-wrapper > div.header-nav > div > nav > div:nth-child(n) > a{
        display:inline-block;
        position: relative;
}

#header > div.header-announcement-bar-wrapper > div > div.header-display > div.header-title-nav-wrapper > div.header-nav > div > nav > div:nth-child(n) > a::before{
    content:'';
    position: absolute;
    width:100%;
    transform: scaleX(0);
    height:2px;
    bottom:0;
    left:0;
    background-color: #000000;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}

#header > div.header-announcement-bar-wrapper > div > div.header-display > div.header-title-nav-wrapper > div.header-nav > div > nav > div:nth-child(n) > a:hover::before{
    transform: scaleX(1);
    transform-origin: bottom left;
}

Add it below and hit the save button so I can see what its doing.

4 minutes ago, rwp said:

Add it below and hit the save button so I can see what its doing.

I have added it below and saved it, the image still does not change . Here is the website link: https://www.startupvillage.nl/

You have an error in the CSS

Nothing after that is loading.

4 minutes ago, rwp said:

You have an error in the CSS

Nothing after that is loading.

Damn okay, do you have any idea how I can fix this? We hired an external company to build the site initially so I didn't add in any original CSS. 

Post all of the CSS

3 minutes ago, rwp said:

Post all of the CSS

Quote

https://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5f2292c9d3288d283c2af685/1596101322262/black+backgroun+logo.pnghttps://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5f2292c9d3288d283c2af685/1596101322262/black+backgroun+logo.pnghttps://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5f2292c9d3288d283c2af685/1596101322262/black+backgroun+logo.pnghttps://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5e902a8f49de1a6c63629294/1586506383842/meetings_grid.pnghttps://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5f2292c9d3288d283c2af685/1596101322262/black+backgroun+logo.pnghttps://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5e902a8f49de1a6c63629294/1586506383842/meetings_grid.pnghttps://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5e90267cf9c5f208f22ab146/1586505341004/flexdesks_grid.pnghttps://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5f2292c9d3288d283c2af685/1596101322262/black+backgroun+logo.pnghttps://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5f2292c9d3288d283c2af685/1596101322262/black+backgroun+logo.pnghttps://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5f2292c9d3288d283c2af685/1596101322262/black+backgroun+logo.pnghttps://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5e902a8f49de1a6c63629294/1586506383842/meetings_grid.pnghttps://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5f2292c9d3288d283c2af685/1596101322262/black+backgroun+logo.pnghttps://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5f2292c9d3288d283c2af685/1596101322262/black+backgroun+logo.png/* ----------------- HOME PAGE -----------------  */

/* --- NAVIGATION --- */
#header > div.header-announcement-bar-wrapper > div > div.header-display > div.header-title-nav-wrapper > div.header-nav > div > nav > div:nth-child(n) > a{
        display:inline-block;
        position: relative;
}

#header > div.header-announcement-bar-wrapper > div > div.header-display > div.header-title-nav-wrapper > div.header-nav > div > nav > div:nth-child(n) > a::before{
    content:'';
    position: absolute;
    width:100%;
    transform: scaleX(0);
    height:2px;
    bottom:0;
    left:0;
    background-color: #000000;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}

#header > div.header-announcement-bar-wrapper > div > div.header-display > div.header-title-nav-wrapper > div.header-nav > div > nav > div:nth-child(n) > a:hover::before{
    transform: scaleX(1);
    transform-origin: bottom left;
}
.header-title-logo a:hover img {
  visibility: hidden;
}
.header-title-logo a:hover {
  background-image: url('https://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5f2292c9d3288d283c2af685/1596101322262/black+backgroun+logo.png');
  background-size: contain;
}
/* --- Work Spaces --- */
#header > div.header-announcement-bar-wrapper > div > div.header-display > div.header-title-nav-wrapper > div.header-nav > div > nav > div.header-nav-item.header-nav-item--folder > div > div:nth-child(n) > a{
    text-align: left;
    padding-top: 10px;
}

#header > div.header-announcement-bar-wrapper > div > div.header-display > div.header-title-nav-wrapper > div.header-nav > div > nav > div.header-nav-item.header-nav-item--folder > div{
    right:auto !important;
  	left:-1em !important;
}

/* --- Community tabs --- */

.tab-btn{
  font-family:"Space Mono";
  color:#F95043;
  max-width:200px;
  display: inline-block;
  padding: 12px 18px;
  font-size:1.2em;
  background:white;
  border:2px solid #F95043;
  margin:20px;
}

.tab-btn:hover{
  background-color:#F95043;
  color:white;
  transition: 0.5s;
}

.tab-btn.active{
  background:#F95043;
  color:white;
 font-family:"Space Mono"
}

.tab-section-hide{
  display:none;
}
.tab-section-show{
  display:block;
}

/* --- Font styles --- */

@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@500&display=swap');

.sqsrte-large {
  font-family:"Work Sans", sans-serif;
  font-weight:500;
}

.sqsrte-small{
  color:#A9A9A9;
  }

/* --- Offices background red --- */

.background-right-blocks{
  width:80%;
  background-color:#F95043; 
  padding:10%;
  }

.background-right-blocks > p.sqsrte-large, .background-right-blocks, .background-right-blocks > p.sqsrte-small, .background-right-blocks-blue > p.sqsrte-large, .background-right-blocks-blue, .background-right-blocks-blue > p.sqsrte-small{
  color:white;
}

.background-right-blocks > a, #background-right-meetings > p.sqsrte-medium > a{
  text-decoration:underline;
  color:white;
}

#background-right-offices_image {
  background-image:url("https://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5e8ee73ad24dde73b9f88cc9/1586423610491/02_offices_offices%401x.png");
  width:606px;
  height:188px;
  float:right;
  margin-top:8px;
}

/* --- Flexdesks background red --- */

#background-right-flexdesks-image {
  background-image:url("https://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5e90267cf9c5f208f22ab146/1586505341004/flexdesks_grid.png");
  width:606px;
  height:188px;
  float:right;
  margin-top:8px;
  margin-bottom:20px;
}


/* --- Meetings background blue --- */

.background-right-blocks-blue{
  width:80%;
  background-color:#0F5B6D; 
  padding:10%;
  }

#background-right-meetings-image {
  background-image:url("https://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5e902a8f49de1a6c63629294/1586506383842/meetings_grid.png");
  width:606px;
  height:188px;
  float:right;
  margin-top:8px;
  margin-bottom:20px;
}

/* --- Events background red --- */

#background-right-events-image {
  background-image:url("https://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5e902c11e5b08e4c70caa11b/1586506770208/events_grid.png");
  width:606px;
  height:188px;
  float:right;
  margin-top:8px;
  margin-bottom:20px;
}

/* --- Our Story background red --- */

#background-right-ourstory-image {
  background-image:url("https://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5e902cef8d142251c7baabef/1586506991815/ourstory_sciencepark_grid.png");
  width:606px;
  height:188px;
  float:right;
  margin-top:8px;
  margin-bottom:20px;
}

/* --- Calendar cursor inactive --- */

#yui_3_17_2_1_1586507539487_262 > div.summary-thumbnail-outer-container > a{
  cursor:default !important;
}

 

This all needs to be on one line

12 minutes ago, rwp said:

This all needs to be on one line

Hi, I fixed that so it is all one line. Additionally, I am now having problems on other areas of our website that used custom CSS. Any solution would be great if we could get this code working again!! Haha, I'm kind of freaking out

What isn't working?

https://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5f2292c9d3288d283c2af685/1596101322262/black+backgroun+logo.pnghttps://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5f2292c9d3288d283c2af685/1596101322262/black+backgroun+logo.pnghttps://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5f2292c9d3288d283c2af685/1596101322262/black+backgroun+logo.pnghttps://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5e902a8f49de1a6c63629294/1586506383842/meetings_grid.pnghttps://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5f2292c9d3288d283c2af685/1596101322262/black+backgroun+logo.pnghttps://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5e902a8f49de1a6c63629294/1586506383842/meetings_grid.pnghttps://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5e90267cf9c5f208f22ab146/1586505341004/flexdesks_grid.pnghttps://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5f2292c9d3288d283c2af685/1596101322262/black+backgroun+logo.pnghttps://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5f2292c9d3288d283c2af685/1596101322262/black+backgroun+logo.pnghttps://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5f2292c9d3288d283c2af685/1596101322262/black+backgroun+logo.pnghttps://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5e902a8f49de1a6c63629294/1586506383842/meetings_grid.pnghttps://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5f2292c9d3288d283c2af685/1596101322262/black+backgroun+logo.pnghttps://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5f2292c9d3288d283c2af685/1596101322262/black+backgroun+logo.png

Those are all links to images, is that part of the CSS or was that accidentally pasted?

/* --- Calendar cursor inactive --- */

#yui_3_17_2_1_1586507539487_262 > div.summary-thumbnail-outer-container > a{
  cursor:default !important;
}

This won't work because #yui blocks do not have static numbers.

Did you get this figured out @actualginger?

@rwp @actualginger Hello, i am having the same issue with my site. Can someone help me with the code to get my logo to change to a gif?

http://www.ericrutherfordcreative.com/

On 11/4/2021 at 1:50 AM, eriruthe said:

@rwp @actualginger Hello, i am having the same issue with my site. Can someone help me with the code to get my logo to change to a gif?

 

http://www.ericrutherfordcreative.com/

Hi,

You mean site title: Eric Rutherford?