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
  • Colorado Designers's Topics
  • Squarespace Forum Club Guidelines's Topics
  • Austin, TX Designers's Club Discussion
  • New York City Designers's Club Discussion
  • Berlin Designers's Club Discussion
  • SEO Experts's Club Discussion
  • Photographers's Club Discussion
  • Graphic Designers's Topics
  • London Designers's Topics
  • Podcasters's Club Discussion
  • Custom Coding Help's Club Discussion
  • Atlanta, GA Designers's Topics
  • Seattle, WA Designers's Topics
  • San Diego, CA Designers's Topics
  • Dallas, TX Designers's Topics
  • Australia Designers's Club Discussion
  • Minnesota Designers's Topics
  • Minnesota Designers's Topics
  • Copywriters's Topics
  • France Designers 🇫🇷's Topics
  • France Designers 🇫🇷's Topics
  • Portland, OR Designers's Topics
  • Canadian Website Designers's Club Discussion
  • Los Angeles Designers & Devs's Club Discussion
  • South African Designers's Club Discussion
  • Brazil Designers's Club Discussion
  • Developers's Club Discussion

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


Badges

Found 301 results

  1. Site URL: https://www.markdanielquintos.com Hi there, I am using template 'Avenue' (markdanielquintos.com) As of now, when clicking on my name in the site title, it links back to the homepage, which is great. I'd like for the subtitle of 'Cinematographer' to operate the same way. I've been googling for lots of code and have found a way to turn 'Cinematographer' into a link, but when I do so, it hovers as red like the rest of my links, I'd like for it to have no change when hovering over it, as 'Mark Daniel Quintos' is. Any tips? Thanks in advance!
  2. Site URL: https://wombat-dinosaur-kkfh.squarespace.com/config/ Hello! I desperately need help finding a CSS code that will work for a hover effect on my navigation links in the menu bar. I want the effect to be something like an underline when the mouse is over a specific link OR an effect where all the links blur when the mouse is hovering over a specific link. Any help would be SO appreciated I have literally tried everything Thank you!!!!
  3. Hi Squarespace! I would like have my thumbnail images change to another image during a hover on my homepage. I'm using Avenue template now and I know this would require custom CSS. You can see my page here: https://www.johnpattersonportfolio.com/. I've attached the original thumbnail vs. the hover state change as attachments. Please let me know if you need more information. Thanks! Dustin
  4. Hi I am currently developing a site and through Custom Css we have applied a colour onto the rollover. We are having problems with the colour showing differently in different areas. For example, in the navigation on the home page the colour renders correctly when you rollover. When you go into a page, Shop, for example, the red is lighter when you rollover. Throughout the site where we have a hyperlink the red is lighter, it's as if it has an opacity to it. The css we are using is: a:not(.sqs-block-button-element) { color: #101820 !important; // standard link color &:hover { color: #9d2235 !important; // hover color } &:active { color: #c1c638 !important; // color link goes when clicked } } The three screen grabs show the darker colour on the nav which is correct and the lighter colour. The thrid shows the lighter rollover when used in a hyperlink. Can anyone help with this or suggest a better method? Thanks.
  5. Site URL: http://www.kirstylittle.com/sculpture-index Hi, my template is brine and I have a gallery section on my index page. The photos in the gallery all have captions, which I have inserted, but I want them to appear on hover. When I look online for the solution, I'm basically told it can happen (this feature is said to be possible with brine), but the settings of the online instructions don't align with what I am seeing, thus making me unable to solve the problem. I've attached photos of all relevant settings that can be changed in relation to this in 'Site Styles' so whoever can help can see what I am seeing. Please help, this problem has been bugging me for quite some time. Thanks
  6. Site URL: https://dog-wrasse-bzts.squarespace.com/ Hi, I want to add this code and style to all of my summary blocks on all pages except for home page. Is there a code i can add that doesn't include the home page. Thank you img.summary-thumbnail-image.loaded:hover { opacity: 0.7; } On all pages except for the home page. Thank you
  7. Hi, I've put a Slideshow Gallery at the top of an Index Page in the Brine template. It has three images that transition. By default when the mouse hovers over an image the slideshow pauses and you cannot prevent this automatic pausing without a code injection. I would like the slideshow to continue on mouseover however I still need the website visitor to be able to press a gallery dot/arrow indicator or press a 'Call to Action' link in the image content body text. How can this be achieved? The code below prevents the index slideshow pausing on mouseover but it also switches off all mouse pointer events... /* Index Gallery Slideshow - prevent pause on hover */ .tweak-index-gallery-layout-slideshow .Index-gallery-wrapper { pointer-events: none!important; } .tweak-index-gallery-layout-slideshow .Index-gallery-wrapper .Index-gallery-control { pointer-events: auto; }
  8. Site URL: https://harp-chihuahua-m5cc.squarespace.com/companies The summary block thumbnail on my "Companies" page by default links to each respective "blog post" associated with the thumbnail. I would like to be able to link to a different external page for each thumbnail and open that page in a new window. My client would also like to have a hover state on the thumbnail that we can put a few lines of text and perhaps even the link on. Since I'm using summaries elsewhere, I only want this functionality to apply to the "Companies" page. Would appreciate any help. Thanks! Pass: Madrona2020
  9. Hi Tuanphan, I am trying add a hover effect to a 'simple grid' gallery. On hover the image darkens slightly and a caption appears, which is great, but the way I have built this means you cannot now click on the link attached to the image. Can you help me please. I have used the code from the two great threads you have been involved with solving as the base: "Gallery Caption worksarounds for 7.1 - Round 1 & Round 2" ( This is the code as it stands, (excuse my annotations): body { width: 100%; } section.gallery-section [class*='-item']:not([class*='-item-']):not([class*='-reel']):not([class*='-slideshow']) { position: relative; } .gallery-masonry .gallery-item-description { visibility: hidden; } //TEXT .gallery-item-description { font-family: urw-din-semi-condensed; font-size: 20px; color: white; text-align: center; } //OVERLAY? .gallery-grid, //.grid covers the simple gallery .gallery-strips, .gallery-masonry, .gallery-reel, .gallery-fullscreen-slideshow { .gallery-item-description { position: absolute; width: 100%; height: 100%; bottom: 0; background-color: rgba(0, 0, 0, 0.75); padding: 25% 0% 0% 0%; box-sizing: border-box; } } .gallery-grid-item .gallery-item-description { visibility: hidden; opacity: 0; transition-duration: 0.75s; } .gallery-grid-item:hover .gallery-item-description { visibility: visible; opacity: 100; } .gallery-grid-item.has-clickthrough:hover { opacity: 0.5; } .gallery-slideshow, .gallery-fullscreen-slideshow, .gallery-reel { .gallery-item-description { padding: 10px 25px; opacity: 1; transition: opacity 0.2s; } .gallery-slideshow-item:not([data-in="true"]), .gallery-fullscreen-slideshow-item:not([data-in="true"]), figure[style*="-9999"] { .gallery-item-description { opacity: 0; } } } .gallery-slideshow { .gallery-slideshow-list { position: static; } .gallery-slideshow-item-wrapper, .gallery-item-description { flex: 1 1 auto; } } .gallery-reel { .gallery-item-description { text-align: center; left: 50%; transform: translateX(-50%); } &[data-width="inset"], &[data-width="inset"] { .gallery-item-description { max-width: 88vw; } } &[data-width="full-bleed"] { .gallery-item-description { max-width: 100vw; } } } .gallery-lightbox .gallery-item-description { margin-top: 1em; padding: 1em 2em; background-color: rgba(225, 225, 225, 1); transition: opacity 0.1s ease-out; } .gallery-lightbox-item[data-in=false] .gallery-item-description { opacity: 0; } Thanks so much for your help. Oh, this is the version of the footer code you wrote in the previous threads: <script> /** * Add descriptions/captions to galleries in Squarespace 7.1. * JavaScript * © @brandon (Squarespace Forum User) * This software is provided "as is", without warranty of any kind, express or implied. */ document.addEventListener("DOMContentLoaded", function() { addGalleryItemDescriptions(); function addGalleryItemDescriptions(gs, gdzs) { var a=['querySelectorAll','section.gallery-section,\x20.gallery-lightbox','length','[class*=\x27-item\x27]:not([class*=\x27item-\x27])','getElementsByTagName','img','alt','trim','createElement','div','className','gallery-item-description','textContent','appendChild'];var b=function(c,d){c=c-0x0;var e=a[c];return e;};(function(c,d){var e,f,g,h,i,j,k;e=document[b('0x0')](c?c:b('0x1'));i=e[b('0x2')];while(i--){f=e[i][b('0x0')](d?d:b('0x3'));j=f[b('0x2')];while(j--){g=f[j][b('0x4')](b('0x5'))[0x0][b('0x6')][b('0x7')]();if(g){h=document[b('0x8')](b('0x9'));h[b('0xa')]=b('0xb');h[b('0xc')]=g;f[j][b('0xd')](h);}}}}(gs,gdzs)); } }); </script>
  10. Hi all, I am desperately trying to do something that's seemingly easy but frustratingly seems impossible with any template. I've been working on this for a few hours and can't figure it out so I'm coming to you smart folks! The client requires two things of her Gallery Portfolio: Hover on the image so the title displays. She loves the "look" of Wexley's hover image display: https://wexley-demo.squarespace.com/ Once you click on the image, you should be taken directly to an external site in a new tab. (i.e. either a PDF or an external site URL). In Wexley's gallery page (which is what the site is currently using) - the hover effect is there, but the Click-through URL doesn't register until you're on the second page, defeating the URL's purpose. Flatiron has a nice hover view in Index layout, but again, the click-through URL remains an issue. (https://flatiron-demo.squarespace.com/). York has similar issue. URL: https://sala-writing-site.squarespace.com/ (portfolio is on the home page) // pw: squarespacehelp% Can anyone help me get this to happen? The client is pretty picky about look and layout. We are currently using Wexley in 7.0 but I'm desperate and open to anything at this point, even switching to 7.1 if i have to. (I prefer to do any customization with CSS, rather than code injection, so she doesn't have to upgrade her site package due to Squarespace limitations.) THANK YOU! Rachel
  11. I'd like to add a hover feature to my Instagram carousel that displays the post's caption. A good example is the instagram feed on this site (scroll about 2/3 of the way down): https://www.jacksbarlondon.co.uk/ Does anyone know the code to accomplish this? The hover caption is available on the slideshow design, but I would like to display more than one photo at a time.
  12. portfolio 7.1 site mobile view on portfolio page hover overlay text does not appear whatsoever - I really need this text title to display on touch screens mobiles upon scrolling or selecting -how may i fix this? please take a peek at the portfolio page on any mobile view www.nadinenorman.com/artwork sincere thks to anybody who may be of help - nadine
  13. Site URL: http://www.furrylittlepeach.com/ Hi there, I would like to achieve a gallery wall where each images title can be seen when hovering over the image. Does anyone know how to do this where the overlay is transparent white, the caption is opaque and black, and the text is in the center of the image? I provided a link to a website in Supply that already figured it out. Thanks for any feedback.
  14. Site URL: https://www.justinphang.com/ Hey there peeps! Here's my website https://www.justinphang.com/ in Lange Template I'm a total beginner in CSS and I've been searching everywhere in the forums and Google to no avail of the effect I'm trying to achieve. I'm trying to add hover animation to the pictures in the homepage. It is an Index page. The animation I'm looking at is a slight scale of 1.1 when the mouse cursor is hovering the pictures and the rest of the pictures are slightly blurred, also trying to achieved a slight drop shadow at the hovered picture too. If it's not too much to ask, I'm trying to add animation for the main navigation (Weekdays, weekends and week-long) so that they fade-in appear one by one after the main picture is loaded. But this appearing animation only applies to the homepage. Is it possible? Thanks in advance!
  15. Site URL: https://mckinnonsquare1.squarespace.com Hello, I am having trouble finding a solution to add a hover color for m yhyperlinks in Talva 7.1. Any suggestions would be very helpful.
  16. 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; }
  17. Site URL: https://fourgroundspreview.squarespace.com/ourwork Hi, I'm trying to have my gallery image change to another image on hover. Is there a way to do this with CSS? Any help is greatly appreciated. https://fourgroundspreview.squarespace.com/ourwork password: fourgroundspreview
  18. I'm attempting to add a hover like the attached example to videos on my site in a gallery grid. Support suggested adding an Index Gallery but this didn't work. I'm using Pacific but am not opposed to using a different template. Just looking for simple code to use this effect on my thumbnails so users can figure out which video they're hovering over.
  19. Site URL: https://crimson-cornet-2n6f.squarespace.com/ Hi All, A couple of visual queries on linked text and linked images used to click through to other pages... I'm not a fan of how my template displays linked text as underlined. I'd like to link the name of my practice on my homepage (not in site header) to another page, but I'd like to remove the underline, and instead have the text change colour on hover. I have the same / similar issue with images in my projects gallery. So at the moment the cursor changes to a hand (OK), and it will crudely display a caption overlay on hover, but that's all. I've seen loads of websites where the image changes on hover. It'd be great to be able to have them change to black and white on hover, or fade a little, or have a semi-transparent white mask overlaid. Any help most appreciated! https://crimson-cornet-2n6f.squarespace.com/
  20. Site URL: https://seal-burgundy-yx98.squarespace.com/ I'm hoping to have a hover effect on the images in the gallery on my landing page for Squarespace 7.1, that allows a second image to fade in. I've been able to find lots of tutorials for this for 7.0, and for image blocks and products on 7.1, but not for galleries. And I haven't been able to figure out how to set up the classes properly for this use. I'd like each image in the gallery on my landing page (currently a simple grid, which is the only simple grid gallery on the website) to show a second image on hover, and then those images would link to a page on my site when clicked. I'd only use this effect on my site's landing page (which is also the only page with a masonry grid). Ideally The links are currently set up. Ideally the hover images would be able to be uploaded using this method, but this is flexible. Site: https://seal-burgundy-yx98.squarespace.com/ Login with RobHutch Thanks!
  21. 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!
  22. Site URL: http://www.erichmcvey.com/ Hi all, I have a specific question about a hover over text on an images page template: How can I add a custom hover over text and style? I am looking for something similar like in the provided site URL. I also attach a screenshot of that same URL. The font would be Bodoni, the transparency accordingly. Thank you for your replies and inputs. Cheers
  23. Hi SS Team! So, rather than the project name and an opacity change occur (when I roll over a specific project on my index page), I want the image to change to a completely different image. Please, please, please, please help me! Kind regards. Chris
  24. Site URL: https://www.iamjustinsinger.com/ Looking to have the color on my titles in the portfolio section changed to white when hovered on.
  25. Site URL: https://bear-echidna-k68b.squarespace.com/ I am trying to change the header links color when hovering over a particular link. Thank you very much.
×
×
  • Create New...