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 Topics
  • Photographers's Club Discussion
  • Graphic Designers's Topics
  • London Designers's Topics
  • Podcasters's Club Discussion
  • Custom Coding Help's Topics
  • 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

Found 219 results

  1. Im using Sonny /Brine and we would like to make the text on the poster highlight on Hover - I have seen a few of these questions but none have useful answers for me!
  2. 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!
  3. Hi! I'm trying to create a homepage with a list of my pages, but I want the background image to change as the mouse hovers over the page title... I've achieved this by using a portfolio template, but would prefer to just use CSS to keep it less complicated with navigation. I hope this makes sense! I've attached images if that helps :-) Thanks <3
  4. Site URL: https://snow-beach.com/ Hi, I'm wondering how one would go about formatting a slideshow to start only when a user is hovering over an image. Take this site for example: https://snow-beach.com/ And how to make the slides transition faster than 1 second with no fade in-between. Thanks.
  5. Hey, I'm trying to figure out how to isolate the header button on my website (using 7.1) so I can create a hover effect. I've tried using the chrome inspection tool but I can't find an element similar to .sqs-block-button-element that would isolate the header button. Any help in figuring this out would be greatly appreciated Website: https://hexaflexagon-star-bh8p.squarespace.comPass: square123
  6. Site URL: https://sturgeon-tangerine-zyeb.squarespace.com/ Hi, I already have my CSS set up to display the Summary Block item title and description on rollover, but I'm now looking to add to that functionality. Is there any way to have the actual thumbnail image change on hover? I want to be able to not only display text on rollover, but replace the image as well. Site password is scdp2020
  7. Site URL: https://www.benblenner.com/ Hey, I'm struggling to add hover titles to my gallery thumbnails. There is an option to display the title below each thumbnail but I'd like the title of the project to become visible on rollover. Any ideas? I'm using Avenue. Thanks!
  8. 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.
  9. Help! I have no coding experience whatsoever. Is there a way to make the caption that comes up when hovering on an image block, always 'on' when viewed on a mobile device? Sorry if this is a overasked question, or something simple, or something that just isn't possible. Thank you!!
  10. Site URL: https://www.orlovparis.com The hover over the product image shows the second product image. This happens only on the product page /shop. How can I also have the over effect (with second product image on product image) on another page than product page (eg: homepage)?
  11. I've been trying to display the title and description of these images in a gallery grid on hover. I've been searching the forums and found some helpful code, but nothing that's exactly what I'm looking for. This is the code I am currently using (see below). It is displaying only the title on hover. I need it to display the title and description on hover. Does anyone have any suggestions? I'd also love the opacity to cover the entire image (right now it covers almost all but just the sliver of the top isn't covered). Let me know if anyone has any suggestions. Thank you! .sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding-top: 5em; -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; transition: all 300ms ease-out; } .sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title { background: rgba(240,240,240,0.8); } .sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title { font-family: sans-serif, futura pt ; font-size: 14px; font-style: bold; text-transform: uppercase; letter-spacing:4px; color: #fff; opacity: 0; } .sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title { font-family: sans-serif, futura pt; font-size: 14px; font-style: bold; text-transform: uppercase; letter-spacing:4px; color: #000; opacity: 1; }
  12. Site URL: https://www.sourdoughsocial.com/services I am hoping to have the titles for my images to SHOW when you first launch the page, but then when you hover over, would like to have the text change to subtitle. An example of what I would like to do is on this page (scroll down to the twin images, entitled "Creative" and "Performance"): https://spherical.co/about/ (And yes, I realize this is not a squarespace site...) Here is the code that I have built on the back end, which has the hover text, but it makes it ALL hovered. Currently have it on collection ID for only my "Services" page. #collection-5e7bba06be11fc596290cc91 { .design-layout-poster .image-card-wrapper { visibility: hidden; opacity: 0; transition-duration: .35s; } .design-layout-poster:hover .image-card-wrapper { visibility: visible; opacity: 1; background-color: hsla(275, 30%, 72%, 0.64) } } Thanks in advance for your help! Formatting I HAVE NOW.mov Formatting I WANT.mov
  13. Site URL: https://www.noiamarart.com/ Hello, Wanted to see if anyone is able to help me out with figuring out how to change the title position (bottom of image, not under the image) to my thumbnail images when you hover over the image. *ONLY on Mobile VIEW! (added example pictures of a similar site) Currently when you hover over the image the title shows in center of image and the opacity covers the whole image. Also, seems like only first image on Mobile Viewing has the functioning opacity and title hover, as if it gets stuck on the first image. Got the Avenue template, fyi.
  14. Looking to change the default hover color on a landing page only. Currently it goes from black to gray when you hover. I would like it to go from black to white when you hover. This is for the cover page only on "Edit Action" then "Navigation".
  15. Site URL: http://www.creativeszn.com/investment i have boxes that changes color when you hover over them. it works perfectly fine when you do it on the desktop but it gets stuck when you try to do it on a mobile device. is there a code to fix this?
  16. Hi guys, I could need your help. I would like that all images linked with an URL turn up their brightness when we have a mouseover. Can somebody help what kind of CSS code I need? Cheers, A
  17. Site URL: http://www.alphamalevisuals.com/music-videos http://www.alphamalevisuals.com/music-videos On my website, I currently use an image block as a thumbnail for my music videos. They click the thumbnail and it takes them to the page to watch the music video. Upon hovering (or rollover) over the image block, I'd like for it to swap to play a .GIF when hovering over it. Or maybe play a small video clip if possible? I've looked on the forums and seen other people ask similar questions. Some said something about custom CSS but when I try to copy and paste that code, it does not work for me and I'm not sure what I'm doing wrong. Can anyone help?
  18. 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
  19. I am trying to make my navigation pages to underline on hover; however, I do not want it to change the color of the words above the underline like this. I want it to look like this: But, currently, it looks like this: when using the code: style #header a:active{ text-decoration: underline !important; } #header a:hover{color: red!important; text-decoration: underline ! important; } div.folder.active{ text-decoration: underline ! important; } Any suggestions? I am using 7.1.
  20. 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!
  21. Site URL: http://www.believestudio.co.uk Hi there, I need some help. Does anyone know if there is a way to trigger video playback on hover on a banner image using the brine parallax template on squarespace? Happy to do code injections/css if I need to. I'm just not sure how to go about it, the tricky thing about this whole set up is that the image/videos will be sitting in a parallax banner. The page on my website that I want this to happen is the projects page. Thanks in advance for any help and advice! Cheers, Mark
  22. 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.
  23. 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!
  24. 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
  25. 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
×
×
  • Create New...