Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Search the Community

Showing results for tags 'rollover'.



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


Expert ID

Found 26 results

  1. 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?
  2. Rollover effect (opacity 1>0.5) for /menu1 /menu2 /menu3 <div class="header-nav-item header-nav-item--folder"> <a class="header-nav-folder-title" href="/select-work" tabindex="-1" data-animation-role="header-element">SELECT WORK</a> <div class="header-nav-folder-content"> <div class="header-nav-folder-item"> <a href="/menu">MENU 1</a> </div> <div class="header-nav-folder-item"> <a href="/menu2">MENU 2</a> </div> <div class="header-nav-folder-item"> <a href="/menu3">MENU 3</a> </div> </div> </div>
  3. Site URL: https://www.damiengirardi.com/ Hi all. Looking to add a border to my index image boxes when rolled over and not able to figure it out. Any takers?
  4. Site URL: https://corn-apricot-zn88.squarespace.com/ PW is BA47. I have a rollover effect on the people page that I like, BUT whenever someone doesn't have a title, their name is not as far up the block as someone who does - look at people - Lorne vs Kathy, for example. I have tried to move the name/description with CSS, but they seem to be related to each other position wise. Is there anyway to make the position of the name (title) and then the role (description) so they align horizontally regardless of how many lines it is?
  5. Site URL: http://ghostrightdesign.com I have designed multiple sites on previous versions of Squarespace and was super disappointed to find out that 7.1 no longer supports changing the color of a link when hovering over in the navigation menu or in the main content of a page. This seems like such a basic function that has been available on practically every site I've ever designed or visited. Does anyone know an easy fix for this? I'm not super code savvy. Thanks!
  6. Site URL: http://cclglobal.org Hi! I can't figure out how to get my 4 rollovers on the home page to center on mobile. They are circle graphics under Forum Member Experience. I added this CSS: { background-color: #aeaeae; } #img-hover1 { background-image: url('https://static1.squarespace.com/static/5effad5a19ba7176bb954f8e/t/5f2c58762232b8617bcbd39b/1596741750873/CCL_icon_peer1.jpg'); height: 100px; width: 100px; background-size:contain; } #img-hover1:hover { background-image: url('https://static1.squarespace.com/static/5effad5a19ba7176bb954f8e/t/5f2c587cc963ae176b5f4a95/1596741756609/CCL_icon_peer2.jpg'); And then used this code on the page: <a href="https://cclglobal.squarespace.com/forum-member-experience/#forum"><div style="width:100%;text-align:center;background-repeat:no-repeat;" id="img-hover1"></div></a> Thank you in advance for helping me!
  7. Site URL: https://www.gfxdatabase.com/ Hey, does anyone know how a css code to change the colour of the product names when hovering over them. I'd like it to go from white to the blue I have in the navigation. https://www.gfxdatabase.com/ thanks in advance!!
  8. Hi all, I've been trying to put together some custom CSS to give my images a rollover effect in which the captions appear on top of the image with a dark overlay (shown in the attached images). I'm by no means a CSS expert, so I've been compiling code from different forums, and put together this: .layout-caption-overlay-hover .image-caption-wrapper {background:#000000; opacity: .95 !important; min-height: 100%; top:0!important} .layout-caption-overlay-hover .image-caption-wrapper h1, .layout-caption-overlay-hover .image-caption-wrapper p{color:#ffffff!important; text-align: center !important} .image-caption { left: 50%; position: absolute; top: 50%; width: 80%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } p { font-size: 21px !important; font-weight: semibold !important; color: #ffffff !important; text-transform: uppercase; line-height: 120% !important; letter-spacing: 2px !important; opacity: 1 !important } The issue is that it disables the image link, so my images don't take you anywhere. What can I add to the code to fix this? Thanks!
  9. Site URL: https://pineapple-sapphire-khkb.squarespace.com/ I'm having a rollover issue. I found some CSS to go from a black icon to one with color on hover, and it works perfectly within Squarespace. But when I view it in a separate browser window or different browser, the original icons aren't the same size as the hover versions. The attached images are what it's supposed to look like and what it actually looks like outside of the editor. Here is the CSS I'm using: .icon-swap-linkedin img:nth-child(1) { position:absolute; transition: .5s; } .icon-swap-linkedin img:nth-child(1):hover { opacity:0; } .icon-swap-twitter img:nth-child(1) { position:absolute; transition: .5s; } .icon-swap-twitter img:nth-child(1):hover { opacity:0; } .icon-swap-instagram img:nth-child(1) { position:absolute; transition: .5s; } .icon-swap-instagram img:nth-child(1):hover { opacity:0; } password is guava
  10. Site URL: https://bricktechstudios.com/instructions Hi! I want to disable the product image rollover that occurs when you move your cursor over the product thumbnail. I know that Squarespace 7.1 doesn't support disabling it yet, but does anyone know some code that can be used to manually disable it? Thanks! Screen Recording 2020-07-02 at 1.27.47 PM.mov
  11. Site URL: https://www.bhcpagroup.com/join-our-team I have custom CSS sitewide for regular text links to rollover from burgundy to black: #page a:hover { color: black !important;} I'm not sure if this is causing the rollover text in the buttons to go to gray/black but whatever is the reason, it's hard to read. I'm trying to make the rollover text stay white but still keep the lesser background opacity on the rollover.
  12. Site URL: http://www.jimmadden.ca/motiongraphics Hello all, First time asking on here, but I cant for the life of me figure this one out. I have a page of gifs I have converted from .mov files to show some animation, but there is so many of them I would ideally like to have a static image (possibly with text about the client or something) then when you hover over each one, have that gif animation start. I feel like this would help speed up the browsing experience on this page, any help on this would be greatly appreciated! Using the Jasper Template. - Jim
  13. I have an image hover CSS code implemented, but it affects all images on my site. Is there a way to affect just the linked images? This is the code I am currently using: .sqs-block-image .intrinsic .image-block-wrapper img:hover { opacity: 0.5; }
  14. Hey! I'm using the OM template and trying to create a black and white to colour rollover on the work section of my site (https://www.sinomatic.co.uk/work) I've tried and can get the rollover to work, however it does the rollover effect on all the content within that page whereas I only want it to work on the thumbnails. I would be super grateful for any help 😊 Thank you!
  15. Site URL: https://www.studiovertime.com/thoughts Hello! I'm trying to create a black and white to color rollover for blog post thumbnails (website very much under construction). I'm using this code that I found on another post in this forum: .no-touch .collection-5d7a891600952e518d49e751 .project-image { -webkit-filter: grayscale(100%); filter: grayscale(100%); &:hover, &:focus { -webkit-filter: grayscale(0%); filter: grayscale(0%); } } I've changed .collection...project-image to section[data-section-id="5ec00d59438c273bae2f3262"]. The rollover works, but because the selector is referencing a section (I'm assuming), the effect is applied to all of the blog posts at once instead of the individual blog post thumbnail. It also includes the text, and I don't want the text affected. Is there a way to do this so that the effect only occurs when rolling over a single blog post at a time? I hope this makes sense! Thank you!
  16. Site URL: https://www.seapearls.com/lead-weight Does anyone know how to change the font on the Products page grid to have a rollover? I just need the text under the thumbnails to change color on the hover state. Thanks! Sample page: https://www.seapearls.com/lead-weight (text under images to change color on hover)
  17. Site URL: https://www.seapearls.com/lead-weight Site URL: https://www.seapearls.com/lead-weight Does anyone know how to change the font on the Products page grid to have a rollover? I just need the text under the thumbnails to change color on the hover state. Thanks! Sample page: https://www.seapearls.com/lead-weight (text under images to change color on hover)
  18. 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
  19. 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!
  20. Hi Guys, My client is using a Gallery collection page, for his videos. He wants to add some rollover effects - highlights or scaling on the videos. The Gallery collection is added to an Index page on the Tremont template as a Gallery block. Is this possible? Thanks Krishna
  21. Hi, I'm trying to create a rollover fade effect on my welcome header banner here https://cheetah-lemon-wxxb.squarespace.com/ The look I'm trying to recreate is just like this non-squarespace website http://harperandharley.com/, is there any way to achieve this look with custom css? I'm going for the same treatment on the text as well as the image. Any help is very much appreciated.
  22. The pages I would like rollover effects on are: BrysonPrice.com/music – rollover effect on album art BrysonPrice.com/contact – rollover effect under β€œConnect” images Thanks for your help!
  23. 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
  24. Does anyone know how to have an image change on the rollover?
Γ—
Γ—
  • Create New...