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

  1. 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!!
  2. I'm using the theme Jasper and on my project thumbnail blocks (on homepage) I'd like still images that when you hover over a video plays. Is this possible? Thank you Kieran
  3. Hi there, I have added some code to get the hover effect (overlay + Poster: Title/Subtitle ) on images (see screenshot attached). /* Hover Effect Images */ .sqs-block-image:hover { brightness: 100%; transition: .6s; cursor: pointer;} .sqs-block-image:hover img { filter: brightness(0.7); transition: .3s;} .sqs-block-image:not(:hover) .image-card-wrapper { display:none;} Unfortunately it started behaving weirdly - the hover just works on all images now, rather than on only https://www.aeliaandthecamera.com/branding and text is not displayed while hovering over. Any advices how to make it work properly are highly appreciated šŸ™‚ Many thanks šŸ™‚ A.
  4. 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!
  5. 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
  6. 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!
  7. 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.
  8. 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/
  9. 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!
  10. 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
  11. 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!
  12. 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!
  13. 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!
  14. 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!
  15. 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!
  16. 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!
  17. 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 šŸ™‚
  18. 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/
  19. 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/
  20. 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/
  21. 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.
  22. 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!
  23. 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
  24. 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
  25. 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; }
Ɨ
Ɨ
  • Create New...