How to change a summary block thumbnail image on rollover?

Hi @tuanphan we can continue on the new site and I will contact customer care next time instead of duplicating it once again, thanks for the heads up!

https://marlin-gecko-mcny.squarespace.com/

password: 123456789!

On 7/16/2021 at 8:25 PM, TimBowman said:

Hi @tuanphan that would be extremely helpful if you could help with the points listed above, especially the services listed in two rows!

I also noticed that on Firefox the custom font I uploaded Futura PT is not showing and is replaced with the fonts in your screenshots above, I tried to rectify this with some css however when I sued the !important command other elements stopped working such as removing underlines & hover.

I have copied over the site onto a new draft site as the trial period expired, new URL & password below.

I have also had some issues trying to invert the logo o the mobile navigation bar as would like it to stay black throughout.

https://marlin-gecko-mcny.squarespace.com/

password: 123456789!

Which elements custom font doesn't work?

I see black logo here. Can you explain in more detail?

@tuanphan I managed to fix the font issue by adding a WOFF file instead, which then showed the correct font on firefox, although it is alot more bold than on safari or chrome.

@tuanphanessentially I have inverted the logo on the home/landing page to be white, the I have inverted the mobile menu, which works fine when you open the mobile navigation on the home page, but when you open it from another page (all other pages main logo is black) it inverts to white on the mobile menu, is there a way to make sure the logo is always black on the mobil navigation menu?

I also used the following code to split the team photos into two rows on the culture page, only issue is that it affected the home/landing page community section. 

"@media only screen and (max-width: 640px) {

.summary-item-list {

display: flex;

flex-wrap: wrap;

}

.summary-item {

width: 45% !important;

margin: 4vw 2vw !important;

}

}"

Is there a way to specify a specific summary block? I just want the first two blocks for the community section to show not list them all, any help would be much appreciated.

23 hours ago, TimBowman said:

@tuanphan I managed to fix the font issue by adding a WOFF file instead, which then showed the correct font on firefox, although it is alot more bold than on safari or chrome.

Do you have any other formats? ttf, otf, woff, woff2..?

23 hours ago, TimBowman said:

@tuanphanessentially I have inverted the logo on the home/landing page to be white, the I have inverted the mobile menu, which works fine when you open the mobile navigation on the home page, but when you open it from another page (all other pages main logo is black) it inverts to white on the mobile menu, is there a way to make sure the logo is always black on the mobil navigation menu?

Add to Design > Custom CSS

/* Logo black when overlay menu active - except home page*/
body:not(.homepage).header--menu-open .header-title-logo {
    filter: unset !important;
    -webkit-filter: unset !important;
}

19 hours ago, TimBowman said:

I also used the following code to split the team photos into two rows on the culture page, only issue is that it affected the home/landing page community section. 

"@media only screen and (max-width: 640px) {

.summary-item-list {

display: flex;

flex-wrap: wrap;

}

.summary-item {

width: 45% !important;

margin: 4vw 2vw !important;

}

}"

 

Is there a way to specify a specific summary block? I just want the first two blocks for the community section to show not list them all, any help would be much appreciated.

Use this code

@media only screen and (max-width: 640px) {
body#collection-60f00fb4d833301a6b9abca0 {
.summary-item-list {
display: flex;
flex-wrap: wrap;
}

.summary-item {
width: 45% !important;
margin: 4vw 2vw !important;
}
}
}

Hi @tuanphan i replaced the ttf file with a woff file, how would I add multiple formats to the code below?

"@font-face {
font-family: futura-medium;
src: url(https://static1.squarespace.com/static/60f00f33d833301a6b9aa6b3/t/60f5562c26c2747482f78dbf/1626691116578/Futura-Medium.woff);
}"

The code for the mobile menu logo and specific summary breakdown into 2 rows worked perfectly, thank you so much!

Would it be possible to help with the issues you noted on a previous comment with regards to making the text under "Services" into 2 rows on mobile, along with formatting the "Get in Touch" section into 3 rows so that on Ipad it is all level.

16 hours ago, TimBowman said:

Hi @tuanphan i replaced the ttf file with a woff file, how would I add multiple formats to the code below?

"@font-face {
font-family: futura-medium;
src: url(https://static1.squarespace.com/static/60f00f33d833301a6b9aa6b3/t/60f5562c26c2747482f78dbf/1626691116578/Futura-Medium.woff);
}"

The code for the mobile menu logo and specific summary breakdown into 2 rows worked perfectly, thank you so much!

 

Would it be possible to help with the issues you noted on a previous comment with regards to making the text under "Services" into 2 rows on mobile, along with formatting the "Get in Touch" section into 3 rows so that on Ipad it is all level.

 

Use this, replace url('enter url in here')

@font-face {
  font-family: Futura-medium;
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Thank you @tuanphan, will plug that into the site. Any chance you could help with the layout of services & get in touch? Apologies for the constant questions, and once again thanks for taking the time to respond/assist.

On 7/19/2021 at 3:35 PM, TimBowman said:

Hi @tuanphan we can continue on the new site and I will contact customer care next time instead of duplicating it once again, thanks for the heads up!

https://marlin-gecko-mcny.squarespace.com/

password: 123456789!

 

Add to Design > Custom CSS

/* services Mobile */
@media screen and (max-width:767px) {
div#page-section-60f00f33d833301a6b9aa6f3 .span-8 .span-4 {
    width: 50% !important;
    float: left !important;
}
div#block-1e64c82ec9fd2c0a0644 {
    margin-top: 0 !important;
}
}
/* Get in touch tablet */
@media screen and (max-width:991px) and (min-width:768px) {
div#page-section-60f00f33d833301a6b9aa6f8 .html-block {
    min-height: 160px;
}
}

@tuanphan thank you so much! The get in touch section worked perfectly, however the services layout is not formatted correctly, I've attached a screenshot below.

On 7/23/2021 at 4:26 PM, TimBowman said:

@tuanphan thank you so much! The get in touch section worked perfectly, however the services layout is not formatted correctly, I've attached a screenshot below.

Align left post production, video graphy, digital marketing + make photography no wrap?

Hi @tuanphan yes please, if digital marketing could go be in the middle at the end that would be great. 

On 7/25/2021 at 3:02 PM, TimBowman said:

Hi @tuanphan yes please, if digital marketing could go be in the middle at the end that would be great. 

It looks like you removed Photography.

If make 2 columns now, the left will have 6 items, right will have 2 items, look ugly.

Do you still want to continue?

hello sorry for jump in  to the old thread. Tried bunch of CSS that was listed here, but it still quite not working. The hover works but the new image did not show up. (pic below). URL. is https://www.wearepercolate.com/whoweare  Thanks for the help!

Hello,

This took some figuring out, but eventually I got it to work... I had to specify the block #ID then tell it to change the image individually. Here's the code I used which seemed to work well - bit of a process to do this for every tile, but it's a good result!

Darren

//1 * Hide image on hover */
#BLOCK ID NUMBER HERE .summary-item:nth-child(1):hover div img {
   transition: .5s 
visibility: hidden;
  opacity:0; 
}
/* set new image */
#BLOCK ID NUMBER HERE .summary-item:nth-child(1):hover .summary-thumbnail-container {
    background-image: url(YOUR IMAGE LINK HERE);
    background-size: 100%;
    background-repeat: no-repeat
}

1 hour ago, Resonate said:

Hello,

This took some figuring out, but eventually I got it to work... I had to specify the block #ID then tell it to change the image individually. Here's the code I used which seemed to work well - bit of a process to do this for every tile, but it's a good result!

Darren

//1 * Hide image on hover */
#BLOCK ID NUMBER HERE .summary-item:nth-child(1):hover div img {
   transition: .5s 
visibility: hidden;
  opacity:0; 
}
/* set new image */
#BLOCK ID NUMBER HERE .summary-item:nth-child(1):hover .summary-thumbnail-container {
    background-image: url(YOUR IMAGE LINK HERE);
    background-size: 100%;
    background-repeat: no-repeat
}

 

THANK YOU FOR THIS! it works like a charm!

5 minutes ago, percolategalactic said:

THANK YOU FOR THIS! it works like a charm!

No worries! Glad I could help, it was making my head hurt trying to figure it out so happy I can pass on the help!