Search the Community

Hello, Apologies if this is something basic but I'm looking to have my color rollover state stay. Right now with my current code, it's just changing with the mouse rollover but would love for the color to stay. Can you help? This is my current code: /* Nav item color */ .header-nav-item a { color: #ffffff !important; transition-duration: 0.4s; } /* Nav item hover color */ .header-nav-item a:hover { color: green !important; transition-duration: 0.4s; } /* Nav item active color */ .header-nav-item--active a { color: green !important; }

Site URL: https://www.studiodistill.com/case-studies hi! I would like to add a rollover to the images on this page of my site: https://www.studiodistill.com/case-studies I want the images to have a colored filter over them, and the title of that particular project centered in the image area, in white. is this possible? I'm using foster template on 7.0.

Site URL: https://ray-cone-ap64.squarespace.com/config/pages I have used a portfolio as my home page. I like that portfolio 3 has roll over font that changes the image with each different "portfolio word" i love how it links to the page but.... I dont know how to explain so please bear with me I have four links on my home page -portfolio- each leading to a specific page In the services tab (top of page links) I have designed each page the way I want them to look ...these have same page names that I want to keep on the home page How do i point the portfolio links on the home page to the "other" pages with the corresponding names ????? either that how do i rebuild an identical home page that is not portfolio and still have roll over text that changes images and links to the pages i want? this has been driving me nuts for some time

Hi, I am having a tiny issue where I've added a custom hover on my buttons. It works, but it feels like there is the tiniest delay on the colour of the type roll over vs the drop shadow roll over effect where the drop shadow happens before the text colour? its very tiny but feels off to me on my regular buttons I am using: .sqs-block-button-element:hover { background-color:#F6F4F1!important; color: #F42D27!important; box-shadow: 5px 5px #F42D27; } and header .header-actions .btn:hover { background-color:#F6F4F1!important; color: #F42D27!important; box-shadow: 5px 5px #F42D27; } I want when it rolls over to be the same colour as the website background but the font change colour and a box shadow drop , ive tried the background colour to be the same and transparent but i still notice the slightest delay any help is appreciated site is https://flugelhorn-seahorse-lzrb.squarespace.com/?p&p pw:design

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

Site URL: https://emu-maracas-4rxy.squarespace.com/ Hi, I'm trying to create something similar to this plugin by Ghost: https://www.ghostplugins.com/products/phase-image-changer But I'd like it to be at the top of homepage main banner image. Main image with 4 text links which have this rollover/rotating image effect. I'm not sure if I'm describing this properly so please let me know if you need an explanation! Thanks Site: https://emu-maracas-4rxy.squarespace.com/ Password: emu

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!

Hi, I have three images on my home page. Right now I have the "display caption on hover" option turned on but I would like to create a rollover state for each image instead. I have the regular images and the rollover images ready to go. I just need the code. Do I need to do any additional code for the rollover image so that it conforms to the same shape and area as the regular image? For example, I have code to remove the padding from the image block for the regular image. Will this remove the padding from the rollover image or is additional code needed for this? Thank you.

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.

Site URL: https://www.matthodgesdesign.com/ Is it possible to add simple image rollover effects to a grid gallery in 7.1? All I want for the image to change to a second image on mouse/cursor hover, and then change back on hover off (preferably with a smooth transition). Clearly this isn't possible with the standard controls, but wondering if possible using CSS and custom files? I've been searching online (and on here) and not found the answer, which is surprising in that I would have thought this would be a sought after feature. On my site I have added a simple brightness hovereffect to the images which gives it some interactivity. But preferably I would find away to change to a second image on mouse hover.

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!

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?

Site URL: https://honest-folk.com/our-work Hi all, I'm looking for some help on adding a rollover effect or overlay to images on just one page of my site. I previously found a piece of code to add a colour overlay but it was site-wide. As you'll see on the page here, I've designed a custom portfolio page with the images as links but want them to have a slight transparency on rollover. https://honest-folk.com/our-work Is there a piece of code that I can add to just that page? Thanks.

Site URL: https://demo104e25.squarespace.com/ Hi all, I made a basic table with 1 column and 13 rows, each housing an image with a image-swap rollover. (It is the building drawing in the availability section) Does anyone know how I can make them click to open a link? (ie floor 7) I'm guessing I need to assign an a href or on-click function but I'm not having luck. Ultimately I am trying to have it open a lightbox on click, however since I am using a paid plugin for lightboxes, I do not want to share that bit of code. password: colliers <style> table, th, td { border: 0px; } th, td, tr { padding-top: 0px; padding-bottom: 0px; margin: 0px; } </style> <table style="width:auto" > <tr><img src="https://static1.squarespace.com/static/5feb77c9aeb02e387937d1a6/t/6000b79e3ae8fa1a43339b3e/1610659743220/104E25_Stack_down-12.png" onmouseover="this.src='https://static1.squarespace.com/static/5feb77c9aeb02e387937d1a6/t/6000b7f698976627956b4985/1610659831295/104E25_Stack_over-12.png'" onmouseout="this.src='https://static1.squarespace.com/static/5feb77c9aeb02e387937d1a6/t/6000b79e3ae8fa1a43339b3e/1610659743220/104E25_Stack_down-12.png'" /></tr> <tr><img src="https://static1.squarespace.com/static/5feb77c9aeb02e387937d1a6/t/6000b7a14e3b0270693d8330/1610659745496/104E25_Stack_down-11.png" onmouseover="this.src='https://static1.squarespace.com/static/5feb77c9aeb02e387937d1a6/t/6000b7f598976627956b495e/1610659829015/104E25_Stack_over-11.png'" onmouseout="this.src='https://static1.squarespace.com/static/5feb77c9aeb02e387937d1a6/t/6000b7a14e3b0270693d8330/1610659745496/104E25_Stack_down-11.png'" /></tr> <tr><img src="https://static1.squarespace.com/static/5feb77c9aeb02e387937d1a6/t/6000b7a337cd470d032d74e9/1610659747955/104E25_Stack_down-10.png" onmouseover="this.src='https://static1.squarespace.com/static/5feb77c9aeb02e387937d1a6/t/6000b7f3552fa14b2cf9cabc/1610659827187/104E25_Stack_over-10.png'" onmouseout="this.src='https://static1.squarespace.com/static/5feb77c9aeb02e387937d1a6/t/6000b7a337cd470d032d74e9/1610659747955/104E25_Stack_down-10.png'" /></tr> <tr><img src="https://static1.squarespace.com/static/5feb77c9aeb02e387937d1a6/t/6000b7a644f1817e558a2f07/1610659750254/104E25_Stack_down-9.png" onmouseover="this.src='https://static1.squarespace.com/static/5feb77c9aeb02e387937d1a6/t/6000b7f03ae8fa1a4333a927/1610659824970/104E25_Stack_over-9.png'" onmouseout="this.src='https://static1.squarespace.com/static/5feb77c9aeb02e387937d1a6/t/6000b7a644f1817e558a2f07/1610659750254/104E25_Stack_down-9.png'" /></tr> <tr><img src="https://static1.squarespace.com/static/5feb77c9aeb02e387937d1a6/t/6000b7aac27c91691746e5db/1610659754177/104E25_Stack_down-8.png" onmouseover="this.src='https://static1.squarespace.com/static/5feb77c9aeb02e387937d1a6/t/6000b7ee05d42d08a1b5d372/1610659822724/104E25_Stack_over-8.png'" onmouseout="this.src='https://static1.squarespace.com/static/5feb77c9aeb02e387937d1a6/t/6000b7aac27c91691746e5db/1610659754177/104E25_Stack_down-8.png'" /></tr> <tr><img src="https://static1.squarespace.com/static/5feb77c9aeb02e387937d1a6/t/6000b7ab1e32b02399679da2/1610659755742/104E25_Stack_down-7.png" onmouseover="this.src='https://static1.squarespace.com/static/5feb77c9aeb02e387937d1a6/t/6000b7e6782fa205430d6cda/1610659814688/104E25_Stack_over-7.png'" onmouseout="this.src='https://static1.squarespace.com/static/5feb77c9aeb02e387937d1a6/t/6000b7ab1e32b02399679da2/1610659755742/104E25_Stack_down-7.png'" /></tr> <tr><img src="https://static1.squarespace.com/static/5feb77c9aeb02e387937d1a6/t/6000b7ae44f1817e558a2f8f/1610659758860/104E25_Stack_down-6.png" onmouseover="this.src='https://static1.squarespace.com/static/5feb77c9aeb02e387937d1a6/t/6000b7e4ed8dce1748ec1014/1610659812336/104E25_Stack_over-6.png'" onmouseout="this.src='https://static1.squarespace.com/static/5feb77c9aeb02e387937d1a6/t/6000b7ae44f1817e558a2f8f/1610659758860/104E25_Stack_down-6.png'" /></tr> <tr><img src="https://static1.squarespace.com/static/5feb77c9aeb02e387937d1a6/t/6000b7b044f1817e558a2fb1/1610659760129/104E25_Stack_down-5.png" onmouseover="this.src='https://static1.squarespace.com/static/5feb77c9aeb02e387937d1a6/t/6000b7e1c8d3e85c3f52aa2e/1610659809878/104E25_Stack_over-5.png'" onmouseout="this.src='https://static1.squarespace.com/static/5feb77c9aeb02e387937d1a6/t/6000b7b044f1817e558a2fb1/1610659760129/104E25_Stack_down-5.png'" /></tr> <tr><img src="https://static1.squarespace.com/static/5feb77c9aeb02e387937d1a6/t/6000b7ca041e7937dbd69162/1610659786816/104E25_Stack_down-4.png" onmouseover="this.src='https://static1.squarespace.com/static/5feb77c9aeb02e387937d1a6/t/6000b7df02b98a2acb72c7a5/1610659807600/104E25_Stack_over-4.png'" onmouseout="this.src='https://static1.squarespace.com/static/5feb77c9aeb02e387937d1a6/t/6000b7ca041e7937dbd69162/1610659786816/104E25_Stack_down-4.png'" /></tr> <tr><img src="https://static1.squarespace.com/static/5feb77c9aeb02e387937d1a6/t/6000b7cdc1638e04af71ab62/1610659789250/104E25_Stack_down-3.png" onmouseover="this.src='https://static1.squarespace.com/static/5feb77c9aeb02e387937d1a6/t/6000b7dd3964b53974f84def/1610659805460/104E25_Stack_over-3.png'" onmouseout="this.src='https://static1.squarespace.com/static/5feb77c9aeb02e387937d1a6/t/6000b7cdc1638e04af71ab62/1610659789250/104E25_Stack_down-3.png'" /></tr> <tr><img src="https://static1.squarespace.com/static/5feb77c9aeb02e387937d1a6/t/6000b7cf37cd470d032d7f3e/1610659791370/104E25_Stack_down-2.png" onmouseover="this.src='https://static1.squarespace.com/static/5feb77c9aeb02e387937d1a6/t/6000b7dac1638e04af71ac13/1610659802856/104E25_Stack_over-2.png'" onmouseout="this.src='https://static1.squarespace.com/static/5feb77c9aeb02e387937d1a6/t/6000b7cf37cd470d032d7f3e/1610659791370/104E25_Stack_down-2.png'" /></tr> <tr><img src="https://static1.squarespace.com/static/5feb77c9aeb02e387937d1a6/t/6000b79c8294765527bf5058/1610659740070/104E25_Stack_down-G.png" onmouseover="this.src='https://static1.squarespace.com/static/5feb77c9aeb02e387937d1a6/t/6000b7f944f1817e558a3d48/1610659834469/104E25_Stack_over-G.png'" onmouseout="this.src='https://static1.squarespace.com/static/5feb77c9aeb02e387937d1a6/t/6000b79c8294765527bf5058/1610659740070/104E25_Stack_down-G.png'" /></tr> <tr><img src="https://static1.squarespace.com/static/5feb77c9aeb02e387937d1a6/t/6000b794573db65ca25b8328/1610659732591/104E25_Stack_down-LL.png" onmouseover="this.src='https://static1.squarespace.com/static/5feb77c9aeb02e387937d1a6/t/6000b7fbceaeb271af2785fe/1610659835968/104E25_Stack_over-LL.png'" onmouseout="this.src='https://static1.squarespace.com/static/5feb77c9aeb02e387937d1a6/t/6000b794573db65ca25b8328/1610659732591/104E25_Stack_down-LL.png'" /></tr> </table>

Site URL: https://jules-hunt.com/ Hi I recently customised the thumbnails on my website (in Kester template). However, on iPad and iPhone, the project names no longer appear when you roll over a thumbnail. Can someone help?

Site URL: http://www.jules-hunt.com Hello Can anyone help me smooth out the transitions on my thumbnails, so they don't flicker as you move the cursor off the thumbnail? They appear to blink as the cursor moves off the title and it flicks back to the thumbnail, whereas I'd like a smoother transition. I am using the Kester template. Thanks

Site URL: http://www.jules-hunt.com Hi there I'm currently using the Kester template and would like to customise the following: 1. I would like to design it so that when the cursor rolls over a thumbnail in the 'My Work' page, the background behind the text that appears is custom to each project, rather than white. Like this example here https://stuffihavedone.com/ 2. I would also like some of the thumbnails initially display as looping videos rather than static images. Again, similar to some projects here https://stuffihavedone.com/ Can someone help? Is this possible?

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>

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?

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?

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!

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!!

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!

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

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