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

  1. 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; }
  2. 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!
  3. I am trying to create a hover box with the title of my pieces on my grid gallery.I have no CSS experience, I would really appreciate the help! My template is: Ishimoto. Here's my site: http://www.studiobanan.com/
  4. 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
  5. I'm using the Bedford template and I'm trying to add text and a button that can be viewed when you hover over the images. He there is an example: http://www.devonstank.com/ -> My latest proyects Thanks!
  6. 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!
  7. Does anyone know how to have an image change on the rollover?
  8. 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.
  9. 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.
  10. 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!
  11. 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
  12. 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!
  13. 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!
  14. Hi Wondered how you can replace an image when hovering over. So another image will be displayed when hovering over. Cheers! Hanna
  15. 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!
  16. 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
  17. Basically, the title says it all. In the body of my text I want an image to pip up when you hover your mouse over a certain word. I know this will require some custom css, I just can't find it!
×
×
  • Create New...