Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Zoom and Overlay upon Hover + PNG Logo that Stays


Ptphotography

Question

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.

zen.thumb.jpg.ae02d7a191e23df205177b7ca6593756.jpg

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:

zenx.thumb.jpg.adc0ebcca7141cecfb5493b8a15436c8.jpg

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:

151204132_zen1.png.52032b0b74eb188d7239edaaf5417f3f.png1621233190_zen1.jpg.60f77deb2627b1086735ead1c47944a4.jpg 

Thank you in advance.

Stay safe,
K

Link to post
  • Answers 4
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Posts

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&ai

@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 5fcc8956eb18547f4b

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 { c

Posted Images

4 answers to this question

Recommended Posts

  • 0
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.

zen.thumb.jpg.ae02d7a191e23df205177b7ca6593756.jpg

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:

zenx.thumb.jpg.adc0ebcca7141cecfb5493b8a15436c8.jpg

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:

151204132_zen1.png.52032b0b74eb188d7239edaaf5417f3f.png1621233190_zen1.jpg.60f77deb2627b1086735ead1c47944a4.jpg 

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

image.thumb.png.9911d74b005f142dc5fc8bf289e4af0d.png

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement, Enable Pinch/Zoom on lightboxGeolocation Automatic Currency Converter, Sortable Table from GSheet
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0

@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 🙏

Oakwood-logo.png.a55c8c9f3179116fa3091eeba1a845ae.png

 

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

 

Edited by Ptphotography
Link to post
  • 0
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 🙏

Oakwood-logo.png.a55c8c9f3179116fa3091eeba1a845ae.png

 

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

 

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement, Enable Pinch/Zoom on lightboxGeolocation Automatic Currency Converter, Sortable Table from GSheet
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0
/* 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

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...