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 91 results

  1. Hello! Does anyone know what Custom CSS I should use to have the titles on the blog page change color on hover? This is the page I want to work on https://mastercarsreview.com/reviews Thank you in advance!
  2. I'm having trouble with changing the active & hover color for a secondary navigation folder. For the primary navigation the active/hover color is red - hsla(0, 82%, 42%, 0.77) but the secondary navigation style is a button which is red with white text. I managed to correct the active color with the code below but I would still like the hover color to be red for the drop down folder items. .Header-nav--secondary .Header-nav-folder-title--active { color: hsl(0, 0%, 100%) !important; } Here is the website: https://gardenia-oboe-ap5s.squarespace.com PW: viewsite Any help is appreciated!
  3. Using the Brine template and have alternate image on hover functioning on the product pages. I would like to replicate that alternate image on hover function on the quick view on the home page. I have the page set up with the product page inserted, but it looks like the hover function with need a custom code. I didn't find a solution in a search. Any help would be greatly appreciated! Thank you!
  4. I was wondering if anyone would know how to add text when hovering over an image in the Wells Template? When using the set Gallery page, there is (by default) a very faint overlay applied to the image. I would like to be able to add text to this (in the centre of the image), and possibly increase the opacity of the overlay (as it is barely perceptible). See below for an example of a Wells Gallery page: https://www.squarespace.com/templates/wells I don't mind if the CSS only applies to image blocks, and it would be great if the image could be clickable as I am hoping to construct an Index-type page, due to the fact that the Wells template doesn't include that function. I'm very much a noob when it comes to CSS, so please bear with me! Any help would be amazing šŸ™‚
  5. Hello, As you can see on my website when you hover over 'coffee stories' the word 'shell' appears. For some reason this appears underneath my thumbnail image but instead I would like it to replace the image. How can I do this? Is there a way to make the original image disappear on hover at all? I want to do this with all the thumbnails but have just started with one. Thanks, https://greyhound-keyboard-sa3k.squarespace.com/
  6. Hello, Does anyone know how i would replace a thumbnail image on hover? Each image will replace one of exactly the same dimensions. I have tried the following: #projectThumbs a[href="/summer-of-sport/"] img:hover { background: url("https://images.squarespace-cdn.com/content/v1/5da08b90cec702042e7bd75b/1571842245151-X71IZHOCMO4NWBYCFDQX/ke17ZwdGBToddI8pDm48kBnsafcbTaEy0qOizt2WQ9p7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0hKSnD_p9gN_SPga0QCfUjWrQnhO0xA8lZ7BDb1h3OEMwxfqOlkhHMTRjErZ5TgWHQ/Tower+bridge+hover.png"); background-size: 100% !important; } But it seems that the hover image then sits behind the original but I need it in front of it. Can anyone help? Thank you https://greyhound-keyboard-sa3k.squarespace.com/
  7. Hello, I would like to underline each individual menu item when you hover over it. What CSS would I use to do this? I may also want to keep it underlined when that page is active. Please could you pass on the CSS for this also. Thanks, Liv https://greyhound-keyboard-sa3k.squarespace.com/
  8. I am using the Bedford template and I would like to change the "caption overlay on hover" feature so that the overlay covers the whole image, the whole image is clickable, and I can customize the colors of text and the overlay itself. The default "caption overlay on hover" style is a small transparent gray bar that overlays the very bottom of the image. I searched everywhere for a cohesive snippet of custom CSS code, and while there are several partial answers, I have yet to see something that covers all of my wish list. I'll keep tinkering and report back!
  9. Hi All, I am looking to create a team page with the same effect as this page has - https://www.conducthq.com/about-us/. Would like to have one picture change to another when you hover over it. I know squarespace can only do this with custom code. Can anyone help with this or point me in the right direction? Any help would be greatly appreciated! Thanks Sandra
  10. Hi! Is there a way to create a similar style effect: https://nicolainiermann.com/ U want to randomly place text on my homepage en the background has to change when I hover over it! Thanks in advance! Kamiel
  11. Hi everybody Im using the Hunter template and trying to create a linear gradient over my gallery grid images with a hover effect as well. I can seem to get the hover effect to work, although only to some extend, but have had no luck creating the correct code for the permanent gradient. Im going for the same gradient effect as on this website https://plusdevelopmentgroup.com/ My code looks like this at the moment: img.thumb-image.loaded:before { content: ''; display: block; position: absolute; height: 85%; width: 100%; bottom: 0; transition: height 0.5s ease-out; background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0, 0.7) 100%); transition: background 1s linear; transition: linear-gradient 0.5s ease-out; opacity: 0.5; } img.thumb-image.loaded:hover:before { height: 100%; opacity: 0.5; transition: opacity 0.5s ease-out; }
  12. Bedford template. Iā€™m using image blocks that have the overlap, collage, and card design applied to them. I found this code that makes the whole thing grayscale and when you hover, it goes back to color. However, I only want this affect to be applied on the images and not the headers, subtitles, and buttons. .image-block { transition: filter .3s ease-in-out; filter: grayscale(100%); } .image-block:hover { filter: grayscale(0%); }
  13. I have a client that wants to display a certain image based off whichever text they are hovering over. So we have 3 divs (apartments, lots and townhomes), when they hover over "Apartments" an apartment image would show up on the side. When they hover over "Lots" a lot image will appear in the same position. Also important to note is that there would be a default image in this same position before the user hovers over any of the previously mentioned divs. Please enlighten me on what I'm missing! CSS: HTML: Apartments REVISE 9/20 Phasellus sodales massa malesuada tellus fringilla, nec bibendum tellus blandit. Sed a ligula quis sapien lacinia egestas. Vivamus a ante congue, porta nunc nec, hendrerit turpis. Lots REVISE 9/20 Phasellus sodales massa malesuada tellus fringilla, nec bibendum tellus blandit. Sed a ligula quis sapien lacinia egestas. Vivamus a ante congue, porta nunc nec, hendrerit turpis. Townhomes REVISE 9/20 Phasellus sodales massa malesuada tellus fringilla, nec bibendum tellus blandit. Sed a ligula quis sapien lacinia egestas. Vivamus a ante congue, porta nunc nec, hendrerit turpis.
  14. Hi! So I am trying to change the hover color per link. To be more specific, if you go to my website rickytimmermans.com and hover over Photography and see the sub-categories {portrait, scenery, etc.}, I would like a different hover color per line. The CSS code I found through @Paul2009 was : a:hover { color: white!important; background: black; } So instead of doing black for the sub categories, I want to do other colors. Anything would help. Thank you!!!
  15. I'm working on a site using the Tremont template see here I would like to transfer the mouseover effects of the index-navigation and apply these to the main-nav at the top right of the screen so as when you hover over the menu items they change the background video/image see here. I have achieved a similar effect on other projects but am having difficulty with 1. targeting the background video and 2. placing the images I wish to replace it with. Thanks in advance, any help would be greatly appreciated as I've been battling with this one for too long.
  16. Hey, I'm trying to figure out how to isolate the header button on my website (using 7.1) so I can create a hover effect. I've tried using the chrome inspection tool but I can't find an element similar to .sqs-block-button-element that would isolate the header button. Any help in figuring this out would be greatly appreciated Website: https://hexaflexagon-star-bh8p.squarespace.comPass: square123
  17. I'm trying to add a hover effect on image blocks (in Brine.) I've seen a number of possible ways of doing something like this on this forum but I can seem to fiddle with them to get the desired effect. What I'd like to do is, upon hovering, I'd like the image to fade into a certain colour (2780bc) and have white text over it, heading 2 and, if possible, heading 3. Is this even possible? Any help would be great, O
  18. Hi! I'm trying to add a color overlay and text overlay on hover/rollover of the gallery grid image links on the homepage of my Bedford template portfolio site. I am familiar with custom CSS, and have been using it on my portfolio template, however I can't figure out how to make this happen. Here is a link to my site: www.scoutstud.io Here is an example of the hover effect I want to achieve: http://danielfuhrerdesign.com Any advice would be greatly appreciated!! Bethany
  19. To either define a word or phrase, say a brief description, or introduce a new concept that isn't common knowledge, I want to add this as a feature that Squarespace already has on their own Help Articles. I would assume this would take Javascript to pull off, but my knowledge is limited. There are several of these unanswered questions on this forum, so I'm just adding myself as another voice for the desire to be able to do this. Thanks in advance for any pointers!
  20. I think this effect is possible with images on a grid but can't find out how to do it on individual images on homepage
  21. Say for example there would be a list of text on the site: CatsDogsElephantsPigsKangarooBear When a user hovers over one of these then on the right hand side in the same location an image displays. Therefore, a user could move their cursor down quickly and see cats/dogs/elephants etc in the same spot in quick succession.
  22. Any ideas on how I can have the hover text be positioned at the top of the block? Thanks so much in advance!
  23. Hi there, the only tricky thing here may be that my navigation text changes color depending on if you are on the homepage or another page. It goes from white on the homepage because it's over a full-bleed image to black on any other pages. I would also like any links that I add to my About page or Journal to automatically be underlined when hovering. This is all black text. Thank you so much! I am such a newbie and don't know much CSS. I have tried so many things thus far. **I am using the Camino template
  24. Hi! I want to create a color hover effect on my thumbnail images. When the cursor goes on the image, I want the color to change. This is my website: https://www.gabcyriellenutrition.com/ I want an effect similar to this website: https://www.motherofchunk.com/main-blog-page Thank you for your help!
  25. I'm trying to create a hover in my gallery grid. I'd like each image in the grid to show a different image upon hovering. I have code in the css now to change the color but I'd rather it show a picture instead. Is it possible to do this? I'm using the brine template. This is the page I'm working on: https://www.stephanieausfresser.com/peakweather
Ɨ
Ɨ
  • Create New...