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

  1. Hi all, Im using the Carson template. Im currently working on my website however im stumbling into a problem. I want to enlarge this area (see picture). When I hover on top of the white dot you see the text (commercial reel), Currently the area is as big as te blue square. Is there a way to make this the size of the green sqaure? (I made the squares in photoshop). Looking forward to your answers/suggestions!
  2. Hi! I'm trying to code an index page's images to all be greyscale until you hover or mouseover them. Is this possible? I feel like this is a fairly simple fix but I can't figure it out looking at the inspector.
  3. I am trying to have an image swap with another image on hover. This is my code: #yui_3_17_2_1_1573589440099_107 { background-image: url(https://static1.squarespace.com/static/5c6d99d…/t/5dc91c4…/1573461074565/marks_thumbnail.png); background-size: 646px 470px; } #yui_3_17_2_1_1573589440099_107 img:hover { opacity: 0%; } When I use this within Chrome developer tools (right-click>inspect) in the style/css section, it works like a charm. But inserted into the custom CSS section of Squarespace, nothing happens. this is my website: https://www.mrndacreative.com/
  4. Hey guys, im using the template "york" and on my gallery page i want the caption to overlap on my gallery picture. Like on my Screenshot, but WITHOUT the white background box anround the text, just the text hovering over the picture. Is this possible? thanks!
  5. Hi! I am using the Flatiron template and have an index "gallery" on my homepage. I am looking for a way to change the thumbnail image to a different image when you hover over it, instead of displaying the title like it currently does. This is the page for reference: https://kristen-mast-12ak.squarespace.com/ Example of what I am trying to achieve, where the image changes upon hover: https://bravorocks.myportfolio.com/projects Thanks! -Kristen
  6. could some of you Squarespace wizards help me remove the line under my linked text. You will see from my homepage that it effects the aesthetic quite a lot and i'm unsure how to solve the problem... www.industry-studios.com i would like to remove this underlining site wide and if possible replace it with a colour fade. any help would be great!
  7. Hi, First, I'm new on Squarespace so my quetsion is maybe dumb, sorry for that:). I'm using 7.1 version and would like to use use some overlay text (text shown after hover) on images without using the portfolio display. Actually I'd like the same effect as "portfolio overlay grid" but with single images or galleries (so I can arrange the images as i like and link them to other url's than just the unique urls of the portfolio). Do you know if this is possible? Thank you!
  8. I had originally asked this question years ago (here): https://forum.squarespace.com/topic/79514-css-for-rollover-effect-on-image-block-poster/#comment-121074 The selected answer worked really well for awhile. Although it appears the coding has changed and this css blocks the link from being selected. I have tried altering the css any way possible, but I can't seem to target the issue correctly. I had originally thought the z-index may be the issue but targeting the link and changing it's z-index didn't fix the issue either. Any help would be greatly appreciated!
  9. 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!
  10. 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!
  11. Hello! I'm looking to change the color of navigation links when I hover over them in Squarespace 7.1. There doesn't seem to be an option to do that yet. Does anyone know the CSS for this? Thanks!
  12. 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!
  13. 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 🙂
  14. Comment peut-on créer une image de survol ( hover effect) sur Squarespace? J'ai essayé de me servir du CSS pour y arriver en entrant un code fourni, mais ça ne fonctionne pas :( Est-ce que que quelqu'un pourrait m'aider? J'aimerais qu'en passant son curseur sur l'image, celle-ci change pour une nouvelle. How can I create an Hover effect with a new image? Can anyone help me, I've tried different Css codes and it unfortunately didn't work. Thanks in advance
  15. 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/
  16. 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/
  17. 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/
  18. Some custom code (CSS) to change color Navigation Link Navigation Hover Link Navigation Active Link Notes Add code to Home > Design > Custom CSS The code is based on demo at squarespace.com/templates, so they may not work for some websites or navigation with dropdown If the code doesn't work, try adding !important to after, eg: color: #f1f2f3 !important; If you have any questions/found issues, just comment below or send me a private message. Thanks. Avenue Template /* Nav item color */ .main-nav ul li a { color: #ff0000 !important; } /* Nav item hover color */ .main-nav ul li a:hover { color: violet !important; } /* Nav item active color */ .main-nav ul li.active-link a { color: green !important; } Aviator /* Nav item color */ nav#main-navigation ul li a { color: #ff0000 !important; } /* Nav item hover color */ nav#main-navigation ul li a:hover { color: violet !important; } /* Nav item active color */ nav#main-navigation ul li.active-link a { color: green !important; } Bedford Family: Anya, Bedford, Bryant, Hayden, Bedford /* Nav item color */ #mainNavigation div a { color: #ff0000 !important; } /* Nav item hover color */ #mainNavigation div a:hover { color: violet !important; } /* Nav item active color */ #mainNavigation div.active a { color: green !important; } Brine Family: Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Custom Template, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Lincoln, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West, Brine. /* Nav item color */ .Header-nav-item { color: #ff0000 !important; } /* Nav item hover color */ .Header-nav-item:hover { color: violet !important; } /* Nav item active color */ .Header-nav-item--active { color: green !important; } Farro: Farro, Haute Same as Brine Five /* Nav item color */ nav#main-navigation ul li a { color: #ff0000 !important; } /* Nav item hover color */ nav#main-navigation ul li a:hover { color: violet !important; } /* Nav item active color */ nav#main-navigation ul li.active-link a { color: green !important; } Flatiron /* Nav item color */ ul#nav li a { color: #ff0000 !important; } /* Nav item hover color */ ul#nav li a:hover { color: violet !important; } /* Nav item active color */ ul#nav li.active-link a { color: green !important; } Forte /* Nav item color */ #topNav ul li a span { color: #ff0000; } /* Nav item hover color */ #topNav ul li a:hover span { color: violet; } /* Nav item active color */ #topNav ul li.active-link a span { color: green !important; } Ishimoto /* Nav item color */ #topNav #nav li a { color: #ff0000; } /* Nav item hover color */ #topNav #nav li a:hover { color: violet; } /* Nav item active color */ #topNav #nav li.active-link a { color: green !important; } Momentum /* Nav item color */ #topNav ul li a { color: #ff0000; } /* Nav item hover color */ #topNav ul li a:hover { color: violet; } /* Nav item active color */ #topNav ul li.active-link a { color: green; } Montauk: Julia, Kent, Montauk, OM Same as Momentum Native /* Nav item color */ #navBlock ul li a { color: #ff0000 !important; } /* Nav item hover color */ #navBlock ul li a:hover { color: violet !important; } /* Nav item active color */ #navBlock ul li.active-link a { color: green !important; } Pacific: Bryler, Charlotte, Fulton, Horizon, Naomi, Pacific /* Nav item color */ #mainNavigation div a { color: #ff0000 !important; } /* Nav item hover color */ #mainNavigation div a:hover { color: violet !important; } /* Nav item active color */ #mainNavigation div.active a { color: green !important; } Skye: Foundry, Indigo, Ready, Skye, Tudor /* Nav item color */ .nav-blocks-wrapper div a span { color: #ff0000; } /* Nav item hover color */ .nav-blocks-wrapper div a:hover span { color: violet; } /* Nav item active color */ #mainNavigation div.nav-link--active a { color: green !important; } Tremont: Camino, Carson, Henson, Tremont /* Nav item color */ #mainNavigation div a span { color: #ff0000; } /* Nav item hover color */ #mainNavigation div a:hover span { color: violet; } /* Nav item active color */ #mainNavigation div.active a span { color: green; } Wells /* Nav item color */ div#topNav ul li a { color: #ff0000 !important; } /* Nav item hover color */ div#topNav ul li a:hover { color: violet !important; } /* Nav item active color */ div#topNav ul li.active-link a { color: green !important; } Wexley /* Nav item color */ #topNav ul li a { color: #ff0000; } /* Nav item hover color */ #topNav ul li a:hover { color: violet; } /* Nav item active color */ #topNav ul li.active-link a { color: green; } York: Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, Taylor, York /* Nav item color */ .site-navigation div a span { color: #ff0000; } /* Nav item hover color */ .site-navigation div a:hover span { color: violet; } /* Nav item active colo */ .site-navigation div.active a span { color: green; } Squarespace 7.1 /* Nav item color */ .header-nav-item a { color: #ff0000; } /* Nav item hover color */ .header-nav-item a:hover { color: violet; } /* Nav item active color */ .header-nav-item--active a { color: green; } Created by Tuan Phan. Share to be shared more.
  19. 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!
  20. 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
  21. Is it possible to have a hover state for a logo in the header? My logo says the word "apple", and I want when the mouse hovers over it to swap out for an icon of an apple. Additionally would it be possible to do this for multiple elements in a single logo? i.e. if there was 3 words and hovering over each word would change its state? At the moment I'm just using an animated gif which is fine, just not as clean as I'd like. Thanks!!
  22. 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
  23. 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; }
  24. 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%); }
  25. 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.
×
×
  • Create New...