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

Search the Community

Showing results for tags 'hover'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


About Me


Website


Location

Found 87 results

  1. Apparently this works if the phone is turned horizontally or on an iPad. I'm using the Bryant template. I'm looking for code that I can enter that will make this work. https://okra-leopard-83xz.squarespace.com/new-homes
  2. I have asked SS support if there is a way to add popup on hover to a Gallery Page on Ethan template and answer was no, only Lightbox (which I dont want). Thus the recommendation was to source a 3rd party plugin or write custom code. Can anyone suggest easiest / best solution here? The gallery page has a series of 5 icons, I want them on hover to provide a popup with text and a link to another page. Ideally to look like this G Suites as reference: https://gsuite.google.com/features/Under Connect, hover over the Gmail icon: Please let me know know if you can recommend 3rd party plugin or how complex the custom code would be (I can do a little bit but not much) My site is noteworth.com and you can see icons under Condition Management. Thanks for your help!
  3. Hi everyone! I'm trying to create a gallery with hover over text effects similar to these websites: https://www.ballphotoco.com/portfolio/) https://tecpetajaphoto.com/portfolio/ I currently have the Bedford theme. Is there any way to make this happen? Best wishes,Lauren
  4. I'm editing a collection landing page and here is the CSS I have developed so far: #collection-xxxxxx { .Header {display:none;} .Footer {display:none;} .form-wrapper .field-list .field .field-element {background-color: rgba(0,0,0,.5); } .form-wrapper .field-list .field .field-element:focus { background-color: rgba(255,255,255,.9); } .sqs-block-form input {color: white;} .sqs-block-form input:focus {color: black;} .form-button-wrapper .sqs-editable-button-color {background-color: rgba(255,0,0,1);} .sgs-editable-button-color:hover {color: blue;} } I set up the form, so that it is transparent and when you enter text the fields are white (text black) and when you are not editing the fields the text is white. I'm having issues with the button. When I hover over the button the background is white. I want the button background to be red, text white, and when I hover over the button the background either stays red or changes to anything but a light color. I'm okay with the button hover to change to white if I can have the button text color change to black at the same time. What am I missing here?
  5. Hi, Can someone please help how to create a strikethrough hover on the menu of my website please? A CSS code will help a lot. Thanks,Vitor
  6. Hello! I am using the Brine template. I've added image blocks to an index page. Here is what I'm trying to achieve:When a user hovers over one of the images, I would like an outline style button to show that reads VIEW PROJECT, so that they can click it to view more details about the project. Additionally, I have been trying to change the layout-caption-overlay-hover style so that it covers the entire image. I'm able to affect the color, but not the height of the caption itself. Has anyone solved for these issues / can anyone help? Here is what I was trying to use to increase the height of the caption to fill the full image, but it didn't work. .image-block-outer-wrapper.layout-caption-overlay-hover .image-caption-wrapper { background: rgba(245,242,239,.97) !important; box-shadow: 0 2px 4px 0 rgba(51,51,51,.07) !important; max-height: 100% !important;} Here is the URL of my site: http://cleverelk.com/
  7. upon you ShowBox app can be downloaded for any level specified as Humanoid, iOS, PC or for FireStick. Showbox newest Word! Is it outlaw? We change seen more new stories around the app in old many days with their own assumptions some the app. After an in depth explore of the app we had saved few absorbing details active it which are as follows: CLICK FOR MORE INFO>>> http://eshopbucket.com/showbox-apk-download/
  8. Hi, I just want to change the colour of my social icons to red when I hover on it. this is my website : www.wholeheartcreative.com.au my template is Motto Thanks!
  9. Hi, basically I just want to change the colour of the navigation links on just my primary navigation and not all the other links in my site. Help! Thanks. *Sorry forgot to include URL last time: this is my website: https://sawfish-haddock-wjp6.squarespace.com and currently set on private PASSWORD: 12345678 So basically I just want the Home and About (or anything I put on the Primary Navigation) to turn red when I hover on top of it. BUT, I don't want it to affect my Secondary Navigation (so far I only have Let's Talk). Thanks!
  10. Rejuve Allure Every one of the fixings utilized in this cream are 100% non-poisonous and natural in nature. It has been confirmed by the best research centers and specialists in the United States as totally safe to use.The clients of left totally happy with Rejuve Allure Cream. They are astonished by the outcomes they have. VIPs and cosmetologists are completely shocked by their working procedure. http://topdietbrand.com/rejuve-allure/
  11. I would really like to be able to have an image rollover hover for my logo to switch colors on the Avenue template. I've been searching but haven't found a solution. I would really appreciate some help on this!
  12. Hi there, Ive have been looking for some code injection to change the colours/ opacity for each thumbnail on the gallery page in wexley. Any help would be most appreciated!
  13. Hello Squarespace Community! I'm usually able to find the answers I need on here without having to ask the question myself, but this is the first time I've been stumped. I've read many similar questions to mine, but I haven't been able to find the answer I need, so I apologise if this has been asked before. I'm using the Impact template (in the Brine family) and have an index gallery here:https://www.caveen.com/home#projects-home I have used this CSS code to generate a coloured, transparent overlay with the image heading text when the image is hovered over: /* Gallery hover */ .Index-gallery-item-content { opacity: 0; transition: all .25s ease-in-out; min-width: 100%; min-height: 100%; } .Index-gallery-item-content:hover { opacity: 1 !important; transition: all .25s ease-in-out; } The problem is I'm unable to get the heading text to align vertically in the centre of the overlay. When there is no min-height property, the text is vertically centralised, however then the overlay only reaches the height of the text, and I want it to cover the entire image, both for stylistic and UX purposes, as the hover will then trigger over the entire image, not just where the text will render. When the min-height property is set to 100% , the text is anchored to the top of the overlay. I've tried setting the heading text to display as a table cell that can be vertically aligned with this CSS code but to no avail: .Index-gallery-item-content h2 { display: table-cell; vertical-align: middle; } Am I missing something? Any help would be much appreciated as I'm a CSS novice. Thanks,Sam
  14. I'm creating a Menu page in the Blend template (Brine family), and am trying to display an alternate image on hover. I'm wondering if anyone has had luck with code that can do this! As an alternative, I tried converting the Menu into a product page, which does allow for alternate images on hover, but found Product pages couldn't do the following: - Have an intro / header paragraph - Have separate sections with headers - Display item descriptions on the product page If I could fix the above I could move forward with the Menu page but think it might be easier to try to add the hover feature onto my existing non-product page. Any advice appreciated - thanks!
  15. Hi, I use the Five template and adjusted my navigation to include an icon underneath the page name. The icon is hidden, but shows on hover. I would also like it to show without hover on the active page.This is the navigation I have now (I added spaces after every < to make the tags show): < div class="navi">< div class="navitext">pagename< br>< /div>< i class="icon(through fontawesome) naviconpos">< /i>< /div> CSS settings: .navi {display: block; visibility: hidden;} .navi:hover {visibility: visible;} .navi:active {visibility: visible;} .navitext {visibility: visible;} .naviconpos {position: relative; left: 30%;} It takes the active navigation color from squarespace site style. It seems .navi:active does not do anything. I tried !important on it, but that completely offset the hidden and position settings. Thank you for any suggestions.
  16. Hi I use the Five template and added a few poster images to one page. The effect I would like is the poster with title+subtitle to be a little darker and on hovering over the image turning normal bright and the title+subtitle disappears. The image should also function as a link. I managed to setup a hover effect, but I have two problems: 1. Due to the brightness filter on the not hovered image, the title+subtitle are also darker. I would like them to be normal white. 2. Upon hovering the filter clears, but title+subtitle don't vanish. These are my CSS settings, yet I don't know squarespace's tags: .sqs-block-image:hover {font-color: rgba(0, 0, 0, 0.1); color: rgba(0, 0, 0, 0.1); brightness: 100%; transition: .6s;} .sqs-block-image:not(:hover) {filter: brightness(0.6); transition: .3s;} .sqs-block-image-link {z-index: 1;} .sqs-block-title:hover {color: rgba(0, 0, 0, 0.1);} .sqs-block-title:not(:hover) {z-index: 1;} On .sqs-block-image:hover font-color or color did not do anything. .sqs-block-title also did nothing. Any idea what could do the trick? The last resort would be to create a complete new code element, coming at the expense of ease of use. Thank you all.
  17. I have an image hover CSS code implemented, but it affects all images on my site. Is there a way to affect just the linked images? This is the code I am currently using: .sqs-block-image .intrinsic .image-block-wrapper img:hover { opacity: 0.5; }
  18. I have used the following CSS to add a rollover effect on any image with a link, although it does not work when an image is changed to a poster. Does anyone know the fix for this? Any help would be greatly appreciated! a:link img { opacity: 1.0; filter: alpha(opacity=100); } a:hover img { opacity: 0.8; filter: alpha(opacity=80); } example: www.reverogroup.com/test
  19. I am using the Miller Template and would like a simple zoom effect when hovering over images within a grid gallery.
  20. Im using Sonny /Brine and we would like to make the text on the poster highlight on Hover - I have seen a few of these questions but none have useful answers for me!
  21. Hi guys I'm trying to create a hover effect whereby the image fades out and the title appears. When I hover over the title I completely lose the opacity effect! I've cobbled together some code from lots of different places on this forum so it's probably super obvious where I'm going wrong. The page url is https://damien-creagh.squarespace.com/drama-gallery Would really appreciate some guidance. Thanks! Here's the code I'm using: img.summary-thumbnail-image { opacity: 1; transition: opacity .7s; } img.summary-thumbnail-image.loaded:hover { opacity: 0.3; } .sqs-block-summary-v2 .summary-item .summary-title { transform: translateY(-10%); opacity: 0; transition: transform .6s ease-out, opacity .5s; hyphens: auto; text-align: center; position: absolute; left: 20%; top: 50%; width:70%; margin-left: auto; margin-right: auto; } .sqs-block-summary-v2 .summary-item:hover .summary-title { transform: translateY(0); opacity: 1; text-align: center; position: absolute`enter code here`; left: 20%; top: 50%; margin-left: auto; margin-right: auto; width: 70%; hyphens:none; } .sqs-block-summary-v2 .summary-item .summary-title a { font-size: 1em; z-index:20000 !important; font-size: 140%; color: #2a2a2a; display: block; }
  22. Does anyone have Custom CSS I could use to have this hover effect of the vertical line appearing above each link and then remaining above the active link when I am visiting the page? I'd like it to be the exact same as the Squarespace Circle website: https://circle.squarespace.com Thanks in advance!
  23. I am trying to create a hover box with the title of my pieces on my grid gallery.I have no CSS experience, I would really appreciate the help! My template is: Ishimoto. Here's my site: http://www.studiobanan.com/
  24. Hello, I would like to change the thumbnails of my portfolio to a completely different image on the hover. It will link out to a site within my website, and I do not want any transitions. I don't know how to write the CSS (and exactly what/how I should label the thing I am changing).. I know I have to change each individual element and that is fine with me, but I also want the hover image to retain the size of the the image it's replacing. my website: https://sorina-vaziri-vhqm.squarespace.com/ image I would like the rotating jersey gif to change to: http://i58.tinypic.com/2vnqq1g.jpg If anyone could help me with this I would very much appreciate it :) I can't seem to find the solution for my specific problem
  25. I'm using the Bedford template and I'm trying to add text and a button that can be viewed when you hover over the images. He there is an example: http://www.devonstank.com/ -> My latest proyects Thanks!
×
×
  • Create New...