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
  • Squarespace Forum Club Guidelines's Topics

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

  1. Site URL: http://https/pentagon-flugelhorn-7ba3.squarespace.com/ Hi there! I currently have all buttons on my site set to utilize the hover functionality. When you hover, the button background color is HSL 251°, 74%, 45% or #3d1ec8 with a white font. On my Home page, I have two buttons: "Learn How I Can Help You" and "Contact Me". I would like for both of these button to NOT have a hover feature but rather just have the button background color be HSL 251°, 74%, 45% or #3d1ec8 with a white font regardless of whether or not you're hovering (like the attached file of the "Contact Me" button) What is the necessary code and where do I input? Many thanks!
  2. Site URL: https://www.thislandisdigital.com/test-rectangles I've already located code to create a hover effect from a recent post (though it needs to be written for every single thumbnail). All of the tutorials and tips I've found so far replace one image with another, though, whereas I would like to overlay an image on top of the currently hovered thumbnail. The effect will basically place a border, some glowing vignette, and a few stylized notches as if looking through a camera. The test index I'm using can be found here. The image I'd like to overlay is here. My current hover code looks like this (with some extra toys thrown in while I experiment!): /* On hovering over a specific block, affect its image. */ a.project:nth-child(1):hover img, a.project:nth-child(2):hover img, a.project:nth-child(3):hover img, a.project:nth-child(4):hover img { //visibility: hidden; opacity: 50%; //border-radius: 150px; filter: blur(2px); //grayscale(100%); //invert(100%); transition: all 0.5s; } a.project:nth-child(1):hover .content-fill, a.project:nth-child(2):hover .content-fill, a.project:nth-child(3):hover .content-fill, a.project:nth-child(4):hover .content-fill { background-image: url(https://static1.squarespace.com/static/5338f2a1e4b012d5a0b4b9e7/t/5e83d5e07a31383b2b77d2d3/1585698273099/Thumbnails_HoverImage_02.png); background-size: 100%; //or: cover; background-position: center center; background-repeat: no-repeat; } How do I make the image appear over top of the thumbnails? I don't really want to fade their opacity to reveal something behind them.
  3. Site URL: https://www.thislandisdigital.com/ So I'll just say I'm not great with CSS as it applies to Squarespace (so far). I generally understand a decent amount of the action code with the brackets but identifying the right subjects (#thisPiece .thatPart) has given me too much trouble to get much done. Extra explanation on those subjects would be appreciated. Question: How do I selectively hide or otherwise alter (color, animation) the thumbnail titles only for specific pages within an index? Context: My site, ThisLandisDigital.com, uses the Avenue template and a grid of thumbnails organize my portfolio. It's common to include project logos for games and films within related thumbnails, so I've already got a layer of text for the first several images. When I enable the default index titles, the text color is not consistently legible and the text is redundant for some thumbnails. Similarly, when I try including titles directly in all of the thumbnail images, the whole page becomes much harder to read at a glance (the GIFs are distracting enough). The site style controls also don't let me choose top/bottom positions for the title, only left/center/right and overlay/under. I don't know yet what solution will be best or even whether playing with titles on some of the thumbnails will work at all, but to experiment with it I'll need to be able to single out each page's thumbnail and toggle its title visibility. Bonus Question: How would I swap the thumbnail images themselves when hovered such that I could design the titles into the images manually or possibly reduce my GIFs to hover reactions? Thanks.
  4. Hello there! I need help on adding css code to change the index thumbnail to another image while on hover. I've been trying to write/locate the css code on my own but I'm having no luck. Here's my wip portfolio page with the thumbnails: http://www.andyancreative.co/work-2 Thanks!
  5. (Updated: SS 7.1) Some custom code (CSS) to change color Navigation Link Navigation Hover Link Navigation Active Link >> 92 Templates Navigation Custom Font 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 !important; } /* Nav item hover color */ .header-nav-item a:hover { color: violet !important; } /* Nav item active color */ .header-nav-item--active a { color: green !important; } Created by Tuan Phan. Share to be shared more.
  6. Hello! I am trying to figure out code for the following two actions. I want to apply each of these actions to one page only, not the entire website. Any help is greatly appreciated! 1) Image gets lighter/less opaque when you roll over or hover. Button stays darker/more opaque when you roll over (scroll down to the the 'about,' 'portfolio, 'contact,' and 'press' images on this page: https://eastonevents.com/) 2) Image gets darker/more opaque when you roll over an image and also a button appears when you hover (see here: https://eastonevents.com/portfolio Images get darker and a button pops up when you roll over.) Thank you! Best, Lauren
  7. Site URL: https://wombat-bobcat-nap5.squarespace.com/ Hello, Basically I want to use a poster image with an active link to take you to another page, but I only want the text to appear when the mouse is hovering over the image, the effect on other image layouts isn't right and poster seems to be the best but we don't yet have the hover option on SS yet. If anyone can share the CSS for this I would be very grateful. Thanks, R
  8. Hi, I'm trying to make a specific page's section/banner change as the mouse hovers a link, changing back to black when not hovering over a link. The best example is this: https://www.pulsefilms.com/directors I am using the Brine template, and an index for this specific page, so I'm changing just a section/banner, not the rest of the page. I don't understand how I would even start to tackle this. Thanks
  9. Hi, I am working on Squarespace 7.1 and I am looking to create a gallery page with titles on each image as you hover over them through custom css. (I want to use a masonry gallery as my landing page that clicks through to each project). Alternatively, I would like to know if it's possible to covert a portfolio index page to masonry - the only available option at the moment is to have equally sized squares.
  10. Site URL: https://www.igwe.paris/studio Dear all ! I have my website : www.igwe.paris for a sneaker brand. I'm creating a new website beside to prepare the new collection, more minimalist design etc. I did it on Wells (because I want a slidebare navigation) I would like to know a few things, such as : - Put the logo on the top center of the page instead of the top left - Add the card on the top right of the screen - Add a color on the navigation when I hover it. - Add a filter color on some picture when I hover it. - Add a footer on all the pages Also if you have any advises and tips for this template and also if you know better template that can help me to do better. See bellow a picture of the layout i've made on photoshop (what i would love to have) and a screenshot of what i did so far on squarespace. Thank you in advance for your help !
  11. 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.
  12. 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!
  13. 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; }
  14. Site URL: https://bassoon-oleander-texb.squarespace.com/ Password: 12345 Very new to this! I'm trying to make the green hover background for the text take up the full space in the folder nest (between each line) without affecting the padding of the text itself. Right now there's a white margin around the hover background due to the padding. Here's the code I'm using: .header-nav .header-nav-item--folder .header-nav-folder-content { top: auto; left: 0em; text-align: left; width: 175px; font-size: 14px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 3px; } .header-nav-folder-item { color: #fff ; border-top: 1px solid #b8b8b8; padding: 7px 0 !important; } .header-nav-folder-item a:hover { background: #77AF87; color: #fff !important; } Any help would be greatly appreciated!
  15. Site URL: https://www.tylerelise.com/ I'm trying to add a hover state to my logo where it just swaps for another image on the hover. Any tips on how to achieve? Thank you!
  16. Site URL: https://jlentertainment.ca Hello! I'm currently working on our company website, and have had some troubles with image-hover effects. When I have tried them out they effect every image on the page. This would be fine - however I use some images to display text to give the site a little more of an identity - but the problem is now when you hover over the images that are meant for text - they get affected and now become blurry or whatever the effect is. Is there any code (or a guide) to make it not effect certain images? Would be greatly appreciated! bonus: my CSS skills are not quite up to par - if anyone knows how to make the image slightly illuminate / glow on hover, that would be very cool! Thank you and all the best.
  17. Site URL: https://www.studioshaw.co.uk/ Hello community, My client currently uses the Avenue template and has a series of blue icons for projects at the bottom of their page. Currently, with the Avenue template when users hover over these icons a blue opacity box overlays the image - Does anyone know any code that would replace the blue opacity box with an alternative image on the avenue template? So instead of a blue box overlay appearing when users hover it would display an alternative image that I set. Let me know if anyone can help code this. T!
  18. Site URL: https://raegocreative.com/ Hi! I am trying to make all the items within my header change to the same colour on hover. So far I have only been able to do it for the nav menu links, login and social icons. But can't get it to work for the logo, cart icon and contact button. Could someone share the css to target these items? Colour I want to change to on hover is: hsl(210, 63%, 85%) Site: https://raegocreative.com/, and template is 7.1 Hester.
  19. I have used coding to achieve a hover over effect that changes the image to another image when hovered over, but for some reason none of the images display on the mobile version. and my coding knowledge isnt good enough to know if this is a coding error or just squarespace not allowing it. The code below is the one im using: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Image Swap on Hover with CSS</title> <style> .card { width: 350px; height: 170px; position: relative; display: inline-block; } .card .img-top { display: none; position: absolute; top: 0; left: 0; z-index: 99; } .card:hover .img-top { display: inline; } </style> </head> <body> <a href="http://www.google.co.uk/"><div class="card"> <img src="https://static1.squarespace.com/static/5e2ec9142b320c36322b1291/t/5e3d336e0e665361c45a7957/1581069167346/mtss-0858R-f.jpg " alt="Card Back"> <img src="https://static1.squarespace.com/static/5e2ec9142b320c36322b1291/t/5e3d33629d7664785ea5a5ce/1581069154983/mtss-0858r.jpg" class="img-top" alt="Card Front"> </div></a> </body> </html>
  20. 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.
  21. 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!
  22. I'm trying to make the content of a text box change when hovered above and then revert back to the original text when mouse is moved away again. E.g. I would like the text box to change from: example.before to example.after (on hover) to example.before Essentially only half the text will change, the word 'example' would always stay as is. There seem to be a few tutorials on how to do this with an image block or text appearing over an image with basic CSS but not with text on text. I could do a workaround with images of the text but would prefer not keep clean, aligned and easily editable. I've found CSS to make the new text appear over the original on hover but can't seem to simultaneously hide the original so it's just doubled up. If anyone can link me to a tutorial or have any ideas - please send them through. Thanks in advance.
  23. Site URL: https://quiet-conqueror.squarespace.com/ Hi all, Looking for some assistance with 7.1. I am trying to get the title / excerpt on the portfolio grid to show on hover (much like this effect here - http://demo.squarestud.io/grid-gallery-9) Here is what I have tried - /*Hover State on images*/ .portfolio-grid-basic { .grid-image:hover { img { -webkit-filter: brightness(0.4); -moz-filter: brightness(0.4); filter: brightness(0.4); } .portfolio-title { opacity: 1 !important; } .portfolio-title strong { opacity: 1 !important; } } img { -webkit-filter: brightness(0.9); -moz-filter: brightness(0.9); filter: brightness(0.9); transition: all ease-in-out 600ms !important; } .portfolio-title { p { max-width: 90% !important; } white-space: initial !important; text-overflow: initial !important; transform: translateY(-0.5em); -webkit-transform: translateY(-0.5em); -moz-transform: translateY(-0.5em); -ms-transform: translateY(-0.5em); } .portfolio-title { pointer-events:none !important; display: block !important; color: #fff !important; font-weight: 600; font-size: 20px; line-height: 25px; text-align: center !important; padding: 0px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 80%; opacity: 0; transition: all ease-in-out 600ms !important; } .portfolio-title strong { display: block; font-weight: 200; font-size: 15px; opacity: 1; transition: all ease-in-out 600ms !important; } .portfolio-title strong:before { display: block; text-align: center; } .portfolio-title p { padding-left: 10px; padding-right: 10px; margin: 0px; opacity: 0 !important; transition: all ease-in-out 600ms !important; } @media (max-width : 870px) { .portfolio-title { opacity: 1 !important; font-size: 11px !important; } .portfolio-title strong { display: none !important; opacity: 0 !important; } .portfolio-title a { display: block !important; } } @media (max-width : 768px) { .portfolio-title { opacity: 1 !important; font-size: 11px !important; } .portfolio-title strong { display: none !important; opacity: 0 !important; } .portfolio-title a { display: block !important; } } } URL is https://quiet-conqueror.squarespace.com/ Password is squarespace. Thanks so much!
  24. 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!!
  25. Im trying to remove the hover underlines in the navigation menu in Flatiron. I just require the text to change colour when cursor is passed over the menu titles. Any solutions please Thanks 🙂
×
×
  • Create New...