Jump to content

Make logo change on hover

Recommended Posts

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!

Link to comment
  • Replies 17
  • Views 2.4k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

.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;
}

 

Link to comment
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?

Link to comment
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;
}

 

Link to comment
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;
}

 

 

Link to comment
12 minutes ago, rwp said:

This all needs to be on one line

Screenshot_20200730-095101_Firefox Beta~2.jpg

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

Link to comment
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.

 

Link to comment
  • 1 year later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.