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


  • 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


Last Updated

  • Start


Filter by number of...


  • Start



About Me




Found 303 results

  1. Hi, Can someone please help how to create a strikethrough hover on the menu of my website please? A CSS code will help a lot. Thanks,Vitor
  2. Hello! I am using the Brine template. I've added image blocks to an index page. Here is what I'm trying to achieve:When a user hovers over one of the images, I would like an outline style button to show that reads VIEW PROJECT, so that they can click it to view more details about the project. Additionally, I have been trying to change the layout-caption-overlay-hover style so that it covers the entire image. I'm able to affect the color, but not the height of the caption itself. Has anyone solved for these issues / can anyone help? Here is what I was trying to use to increase the height of the caption to fill the full image, but it didn't work. .image-block-outer-wrapper.layout-caption-overlay-hover .image-caption-wrapper { background: rgba(245,242,239,.97) !important; box-shadow: 0 2px 4px 0 rgba(51,51,51,.07) !important; max-height: 100% !important;} Here is the URL of my site: http://cleverelk.com/
  3. Hi, basically I just want to change the colour of the navigation links on just my primary navigation and not all the other links in my site. Help! Thanks. *Sorry forgot to include URL last time: this is my website: https://sawfish-haddock-wjp6.squarespace.com and currently set on private PASSWORD: 12345678 So basically I just want the Home and About (or anything I put on the Primary Navigation) to turn red when I hover on top of it. BUT, I don't want it to affect my Secondary Navigation (so far I only have Let's Talk). Thanks!
  4. Rejuve Allure Every one of the fixings utilized in this cream are 100% non-poisonous and natural in nature. It has been confirmed by the best research centers and specialists in the United States as totally safe to use.The clients of left totally happy with Rejuve Allure Cream. They are astonished by the outcomes they have. VIPs and cosmetologists are completely shocked by their working procedure. http://topdietbrand.com/rejuve-allure/
  5. I would really like to be able to have an image rollover hover for my logo to switch colors on the Avenue template. I've been searching but haven't found a solution. I would really appreciate some help on this!
  6. Hi there, Ive have been looking for some code injection to change the colours/ opacity for each thumbnail on the gallery page in wexley. Any help would be most appreciated!
  7. Hello Squarespace Community! I'm usually able to find the answers I need on here without having to ask the question myself, but this is the first time I've been stumped. I've read many similar questions to mine, but I haven't been able to find the answer I need, so I apologise if this has been asked before. I'm using the Impact template (in the Brine family) and have an index gallery here:https://www.caveen.com/home#projects-home I have used this CSS code to generate a coloured, transparent overlay with the image heading text when the image is hovered over: /* Gallery hover */ .Index-gallery-item-content { opacity: 0; transition: all .25s ease-in-out; min-width: 100%; min-height: 100%; } .Index-gallery-item-content:hover { opacity: 1 !important; transition: all .25s ease-in-out; } The problem is I'm unable to get the heading text to align vertically in the centre of the overlay. When there is no min-height property, the text is vertically centralised, however then the overlay only reaches the height of the text, and I want it to cover the entire image, both for stylistic and UX purposes, as the hover will then trigger over the entire image, not just where the text will render. When the min-height property is set to 100% , the text is anchored to the top of the overlay. I've tried setting the heading text to display as a table cell that can be vertically aligned with this CSS code but to no avail: .Index-gallery-item-content h2 { display: table-cell; vertical-align: middle; } Am I missing something? Any help would be much appreciated as I'm a CSS novice. Thanks,Sam
  8. I'm creating a Menu page in the Blend template (Brine family), and am trying to display an alternate image on hover. I'm wondering if anyone has had luck with code that can do this! As an alternative, I tried converting the Menu into a product page, which does allow for alternate images on hover, but found Product pages couldn't do the following: - Have an intro / header paragraph - Have separate sections with headers - Display item descriptions on the product page If I could fix the above I could move forward with the Menu page but think it might be easier to try to add the hover feature onto my existing non-product page. Any advice appreciated - thanks!
  9. I have used the following CSS to add a rollover effect on any image with a link, although it does not work when an image is changed to a poster. Does anyone know the fix for this? Any help would be greatly appreciated! a:link img { opacity: 1.0; filter: alpha(opacity=100); } a:hover img { opacity: 0.8; filter: alpha(opacity=80); } example: www.reverogroup.com/test
  10. Does anyone have Custom CSS I could use to have this hover effect of the vertical line appearing above each link and then remaining above the active link when I am visiting the page? I'd like it to be the exact same as the Squarespace Circle website: https://circle.squarespace.com Thanks in advance!
  11. Hello, I would like to change the thumbnails of my portfolio to a completely different image on the hover. It will link out to a site within my website, and I do not want any transitions. I don't know how to write the CSS (and exactly what/how I should label the thing I am changing).. I know I have to change each individual element and that is fine with me, but I also want the hover image to retain the size of the the image it's replacing. my website: https://sorina-vaziri-vhqm.squarespace.com/ image I would like the rotating jersey gif to change to: http://i58.tinypic.com/2vnqq1g.jpg If anyone could help me with this I would very much appreciate it :) I can't seem to find the solution for my specific problem
  12. Hi, I am looking to create an effect similar to on the following website: http://www.scoutstud.io/ My website uses the Hayden template and I am trying to create the effect on the following page: www.chriswhiteside.com/home Can anyone help with the CSS required? (I am new to this) Thanks in advance!
  13. Hi, I'm trying to make my nav bar magnify upon hover like this website: http://www.lehmannmaupin.com can someone help?
  14. Does anyone know how to have an image change on the rollover?
  15. Hello, I am working on the Momentum template, which so far ticks all of my design/ layout boxes, except for the fact that I would like to have the 'hover effect' with titles on each of my images on the gallery pages (these appear in two formats on my site: summary block & grid galleries). Other templates have this 'hover/ title feature' as standard, including Avenue: https://www.squarespace.com/templates/avenue & Jasper https://www.squarespace.com/templates/jasperBut unfortunately they don't fit with a'll of my other requirements. It would be great to have the option to splice the two templates together to create my perfect template, but failing that, could anyone advise on how to add code to create this 'hover' function on my Momentum gallery pages?Huge thanks!Alex
  16. So I found these really cool CSS Hover effects that I would like to use. There are 10 versions and they are really easy to implement thanx to the original authors great tutorial. The only issue seems to be that a few of the effects, including the one I would really like to use does not seem to be touch device friendly. It wouldn't be so bad if the hover effect and text didn't work but they kept the click to linked page but even the link does not work. They just become dead picture that do nothing when touched. (Not: have only tested on a iPad/iPhone but I assume it effects all touch type inputs). Here is the linke to the examples: http://tympanus.net/Tutorials/OriginalHoverEffects/index10.html# Number 10 is the one I would like to use so I am looking for input to see if there is a way to make it "touch friendly" or if anyone else has a similar one that works 100%. I am looking to replace the current version I currently have on my page that only has the "enlarge" aspect to it, but would like a version that allows me to add text. Site to be used on is www.ahsonoz.com. Of course as I have written else where my dream solution would be to have a index like approach from the flatiron template built into a template like five.
  17. Hi all! I am trying to alter the hover state of an image caption by increasing the colored band to cover the full image on hover, and vertically and horizontally align the image caption text. I was able to get the colored background to cover the full image, and center the text horizontally, but I cannot get the vertical alignment to budge! Any ideas on what line of code I need to change?? Basically I want it to function like the hover states on this template...: https://www.squarespace.com/templates/?template=flatiron ...But this is the page I am working on: http://www.mollypetroski.com/portfolio Thank you!
  18. I have a gallery grid and am wanting to find a way of being able to hover over each thumbnail and it shows an id number for each picture. It shows the ID number on the rollover when I click and the lightbox enlarges the image, but ideally would like it to show on the gallery thumbnails also using hover. I'm not looking for anything fancy, just two words of text to show over each picture when hovering. I have NO experience with CSS (but am happy to give it a try!) so if anyone can help, please make it as simple as you can :) Could you also please let me know if the code would ALL go into the Style section of CSS. It would have been great if there was somewhere we could give a title to the images and it would show up perhaps under each photo in the grid, but unfortunately I've been told this isn't possible at the moment.I've been trying to work this out for 3 days now and would be very grateful for any help at all.Thanks for your time.
  19. I added a black button block with white text on one of my pages but I want it to change to blue box with white text on hover? How do I do this? Thanks!
  20. Hello! Is it possible to replace the text links (e.g. 'work', 'about', 'contact') in the navigation bar with images? I'm using Wells template. I want something similar to this (non squarespace) website: http://www.melissacastrillon.co.uk/ Thanks in advance for any help! Elle
  21. Hi guys, I'm trying to get a smooth hover effect over my linked images. My website is www.mensthetics.com, and if you hover over my images you can see how abrupt the opacity change is. I've pasted this code that I found somewhere to achieve that: a:link img { opacity: 1.0; filter: alpha(opacity=100); /* For IE8 and earlier */ } a:hover img { opacity: 0.8; filter: alpha(opacity=80); /* For IE8 and earlier */ } I'm trying to achieve something more similar to http://www.muscleforlife.com/ PS. Also, if there is a way to get the same gradual/fade color change effect for my links that would also be much appreciated!
  22. Hello, I'm trying to have the text transform to underline in the main navigation (at the top), as well as on hover. Working in Pacific. The text color changes on hover and active currently, but would like to underline as well. Tried to work with the .active-link command, but didn't get far. my site: s2corporation.squarespace.com Any help on this would be awesome!
  23. Hi Wondered how you can replace an image when hovering over. So another image will be displayed when hovering over. Cheers! Hanna
  24. I feel like this should be easy, but I cannot figure out how to change the color of my navigation text in the hover state in my Marquee template. It seems to be set at a default of a dark gray (or opacity of black). I’ve been trying to affect the β€œ.main-nav” tag in the custom CSS, but to no avail. Any thoughts? Thank you!
  25. How can I display a block/text when a user hovers or clicks on an image? I found a few good posts. Here and Here I also found external sources. Each place I went provided a solution similar to this: http://jsfiddle.net/p87g3fey/ Follow the link above to see it in action HTML <a id="thumbnail" href="#"> <img src="http://dummyimage.com/150x150/0066ff/fff"></a> <div id="title">filename.jpg</div> CSS #thumbnail { display: block; width: 150px; height: 150px; } #thumbnail:hover + #title { display: block; } #title { display: none; color: #ffffff; background-color: #000000; text-align: center; width: 130px; padding: 10px; } I don't understand what I'm doing wrong in my code though. Here's what I have: HTML <div class="sqs-block image-block sqs-block-image" data-block-type="5" id="block-yui_3_17_2_2_1428673541254_6455"> </div> <div class="sqs-block html-block sqs-block-html" data-block-type="2" id="block-yui_3_17_2_3_1429198468651_10272"><div class="sqs-block-content"> <p>I want this text to appear when the calendar image is hovered (and preferably clicked too)</p></div> CSS #block-yui_3_17_2_2_1428673541254_6455 { display: block !important; } #block-yui_3_17_2_2_1428673541254_6455:hover + #block-yui_3_17_2_3_1429198468651_10272 { display: block !important; } #block-yui_3_17_2_3_1429198468651_10272 { display: none; color: #ffffff; background-color: #000000; text-align: center; width: 130px; padding: 10px; } I literally just swapped out the selectors to match what I want done: When a user hovers over the calendar image on the right, I'd like text to appear on the left. I've tried other solutions, similar to this with no luck. Any ideas where I'm going wrong? Reason I'm selecting block-yui is that they indeed are static and work: https://answers.squarespace.com/questions/76450/how-to-select-just-1-image-on-a-page The page I'm working on is here: http://www.p2sk.ca/testing-grounds
  • Create New...