Ptphotography Posted December 7, 2020 Share Posted December 7, 2020 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 Link to comment
Beyondspace Posted December 7, 2020 Share Posted December 7, 2020 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%; } BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Ptphotography Posted December 7, 2020 Author Share Posted December 7, 2020 @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 Link to comment
Beyondspace Posted December 7, 2020 Share Posted December 7, 2020 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); } BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Ptphotography Posted December 8, 2020 Author Share Posted December 8, 2020 /* 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 comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.