Zoom and Overlay upon Hover + PNG Logo that Stays

2 hours ago, Ptphotography said:

 

Hello everyone,

We need a huge favour!

We were wondering if you can help us with the code to achieve the same effect as this website:

https://www.gettyimages.ae/?utm_medium=email&aid=38765&elqTrackId=8143679557fd4633899ca958a781a360&elq=d3c40384b13d4cc1b7c1b98f6ebbc448&elqaid=38765&elqat=1&elqCampaignId=21549&elqcst=272&elqcsid=23433

Upon Hover, the image zooms with grey overlay and text appears. But please bear in mind only the image zooms in and the Text stays.

In our case, we would like to know if possible to achieve the same effect but instead of text, we would like to substitute a logo (stays) in png format. 

Our desired outcome:

Our website:

https://ptphotography.squarespace.com/ptprojectssample

If it helps, I am attaching an image and png (with black stoke to show visibility) which can be found in our site:

 

Thank you in advance.

Stay safe,
K

image added, kindly replace your correct logo url

section[data-section-id="5fcc8956eb18547f4b7ead8a"] .sqs-block-image {
  cursor: pointer;
}
section[data-section-id="5fcc8956eb18547f4b7ead8a"] .sqs-block-image img {
     transition: transform 0.5s ease-in-out;
}
section[data-section-id="5fcc8956eb18547f4b7ead8a"] .sqs-block-image .image-overlay {
  background: url(https://content.invisioncic.com/p289038/monthly_2020_12/151204132_zen1.png.52032b0b74eb188d7239edaaf5417f3f.png);
  background-repeat: no-repeat;
  background-size: cover;
}
section[data-section-id="5fcc8956eb18547f4b7ead8a"] .sqs-block-image:hover img {
      transform: scale(1.3);
      transform-origin: 50% 50%;
}

@bangank36 Bless you! Of course everything is possible for you. Thank you for always helping out ☺️ While I have your attention, can you do few tweaks for me please?

section id 5fcc8956eb18547f4b7ead8a allows the PNG to appear on all the images and while I appreciate the code I cannot apply on my website as each image/hotel have their own unique logo so if you can help me assign a logo on each pciture I'd be eternally grateful! Below is another logo for you to play on. If you can help me with the code for the first two images I will do my best to figure out the code for the rest 🙏

Lastly, please please please, can you make the LOGO appear only on hover? We want it hidden on preview then appear on hover. 

Thank you for your help and patience 🙏

Always grateful,
K

3 hours ago, Ptphotography said:

@bangank36 Bless you! Of course everything is possible for you. Thank you for always helping out ☺️ While I have your attention, can you do few tweaks for me please?

section id 5fcc8956eb18547f4b7ead8a allows the PNG to appear on all the images and while I appreciate the code I cannot apply on my website as each image/hotel have their own unique logo so if you can help me assign a logo on each pciture I'd be eternally grateful! Below is another logo for you to play on. If you can help me with the code for the first two images I will do my best to figure out the code for the rest 🙏

 

Lastly, please please please, can you make the LOGO appear only on hover? We want it hidden on preview then appear on hover. 

Thank you for your help and patience 🙏

Always grateful,
K

 

Using the Find Squarespace Ids extension like above you can see each image come with block id, so you can edit it like so

section[data-section-id="5fcc8956eb18547f4b7ead8a"] .sqs-block-image {
  cursor: pointer;
}
section[data-section-id="5fcc8956eb18547f4b7ead8a"] .sqs-block-image img {
     transition: transform 0.5s ease-in-out;
}
section[data-section-id="5fcc8956eb18547f4b7ead8a"] .sqs-block-image .image-overlay {
  background-image: url(https://content.invisioncic.com/p289038/monthly_2020_12/151204132_zen1.png.52032b0b74eb188d7239edaaf5417f3f.png);
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
}
section[data-section-id="5fcc8956eb18547f4b7ead8a"] .sqs-block-image:hover .image-overlay {
  opacity: 1;
}
section[data-section-id="5fcc8956eb18547f4b7ead8a"] .sqs-block-image:hover img {
      transform: scale(1.3);
      transform-origin: 50% 50%;
}
/* Add the other logo here */
section[data-section-id="5fcc8956eb18547f4b7ead8a"] [replace the image id here 1 - remove bracket].sqs-block-image .image-overlay {
  background-image: url(https://content.invisioncic.com/p289038/monthly_2020_12/151204132_zen1.png.52032b0b74eb188d7239edaaf5417f3f.png);
}
section[data-section-id="5fcc8956eb18547f4b7ead8a"] [replace the image id here 2 - remove bracket].sqs-block-image .image-overlay {
  background-image: url(https://content.invisioncic.com/p289038/monthly_2020_12/151204132_zen1.png.52032b0b74eb188d7239edaaf5417f3f.png);
}

/* Add the other logo here */
section[data-section-id="5fcc8956eb18547f4b7ead8a"] [replace the image id here 1 - remove bracket].sqs-block-image .image-overlay {
  background-image: url(https://content.invisioncic.com/p289038/monthly_2020_12/151204132_zen1.png.52032b0b74eb188d7239edaaf5417f3f.png);
}
section[data-section-id="5fcc8956eb18547f4b7ead8a"] [replace the image id here 2 - remove bracket].sqs-block-image .image-overlay {
  background-image: url(https://content.invisioncic.com/p289038/monthly_2020_12/151204132_zen1.png.52032b0b74eb188d7239edaaf5417f3f.png);
}

@bangank36 You're gonna kill me this time, I didn't make it work! Please tell me what I did wrong 😭

For the code on this part [replace the image id here 1 - remove bracket] - I tried - (with hash) #block-58d91b3c34ebfcb0419d and also tried (without hash) block-58d91b3c34ebfcb0419d

Like so:

section[data-section-id="5fcc8956eb18547f4b7ead8a"] #block-58d91b3c34ebfcb0419d .sqs-block-image .image-overlay  

AND

section[data-section-id="5fcc8956eb18547f4b7ead8a"] block-58d91b3c34ebfcb0419d .sqs-block-image .image-overlay  

I tried tweaking the code here and there for 2 hours but my brain hurts now, I have no other choice but to ask for your help again. Please help me get through this 🙏

Kind regards,
K