css_charlotte
Member-
Posts
25 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Everything posted by css_charlotte
-
Hi I have duplicated my portfolio homepage to create separate work pages on my website and have managed to change the orientation of the images from portrait to landscape and change the number of columns (to create a point of difference on different pages) using the following code in the Advanced section of each page (rather than in the css section): <style> .tweak-portfolio-grid-overlay-image-aspect-ratio-34-three-four-vertical .portfolio-grid-overlay .grid-image, .tweak-portfolio-grid-overlay-image-aspect-ratio-34-three-four-vertical .portfolio-grid-overlay .grid-item { padding-bottom: 66.667% !important; } </style> <style> @media screen and (min-width:768px) { div#gridThumbs { grid-template-columns: repeat(2,minmax(0,1fr));} } </style> The work pages have adopted the same styling for hover effects (red border on hover, grayscale on hover, title on hover etc) which is what I want, however the spacing has also been adopted which means that the text on the work pages appears over the image rather than under it on hover. Homepage showing the red border and titles on hover below each homepage image: Work page (duplicated homepage/portfolio page - tweaked to change orientation and column number) which shows the project title displaying over the image: Is there a way to change the padding to the titles on hover on different portfolio pages so these appear below the image? Would this be done in the Advanced section or css section? Thank you!
-
Uneven padding to border around a Grid Image on hover
css_charlotte replied to css_charlotte's topic in Customize with code
Hi, Just tried this but the uneven border at the bottom remains the same - and the project description on hover disappears when captions are turned off too. Any other thoughts would be greatly appreciated! Thanks in advance! -
Uneven padding to border around a Grid Image on hover
css_charlotte replied to css_charlotte's topic in Customize with code
Hi, Thanks for looking at this. I can't see any code which effects the gallery images anywhere. This was a new gallery page which was set-up using the simple grid and images were uploaded via Squarespace gallery images. The only coding is for the border and hover etc. Let me know if you have any other thoughts - this one has me completely puzzled! -
Uneven padding to border around a Grid Image on hover
css_charlotte replied to css_charlotte's topic in Customize with code
Hi, I've just enabled this page and the password is: password - let me know if you can see this ok and thanks for taking a look! -
Hi I have added the code below to my portfolio page which allows me to have a caption display under the image on hover AND a description over the image on hover. I am now trying to replicate this on a gallery-grid-image, however nothing is working! I can get the caption to display under the image on hover, but can't get any text to display over the image at the same time. Code which works to add text over image when doing this on a portfolio page: (screenshot attached to show the effect I am looking for) .grid-item[href*="/palmbaybungalow"]:before { content: "COMING SOON - IN CONSTRUCTION"; color: red !important; font-family: 'ITC Caslon'!important; text-align: center !important; display: block; width: 100%; position: absolute; top: 50%; transform: translateY(-50%); z-index: 99999; opacity: 0;} .grid-item[href*="/palmbaybungalow"]:hover:before { opacity: 1;} How do I apply this to a simple gallery grid image so I get the same effect? Whilst maintaining the caption hover under image at the same time? Thanks! Charlotte
- 1 reply
-
- gallery
- grid-gallery
-
(and 1 more)
Tagged with:
-
Uneven padding to border around a Grid Image on hover
css_charlotte replied to css_charlotte's topic in Customize with code
Hi, The link to the live website is: https://www.workbyline.co.uk/ I'm not sure if you can view the unlinked page I'm having issues with: https://echidna-gardenia-fcb4.squarespace.com/work-2 Thanks, Charlotte -
Hi I am recreating the look and functionality of my portfolio based homepage using a simple grid page which I will overwrite as the homepage (in order to move away from my homepage being a portfolio page). I have recreated this almost exactly using variations of the code which worked for my portfolio page, however the padding around the border on hover is uneven at the bottom. I have included the code I used for my new simple grid gallery homepage and screenshot (this is not a live/linked page currently) and the code for the original portfolio homepage to show the difference. Any help in making the bottom padding / border the same all around the image would be great! Code for border to appear on hover on my new simple grid gallery page where the bottom of the border is not even: (not linked/live) .gallery-grid-item:hover { border: 1px solid #ff0000 !important; padding: 5px !important; background:transparent!important; } figcaption { padding: 0px !important; } Code for border to appear on my original Portfolio page which works perfectly with even border all around the image: (live) .grid-item:hover .grid-image{ border: 1px solid #ff0000 !important; } .grid-item .grid-image-inner-wrapper{ padding:5px;} Thanks, Charlotte
-
Hi @tuanphan This worked perfectly, thank you!
-
Hi @tuanphan The page URL is: https://www.workbyline.co.uk/ Thank you! Charlotte
-
Hi @tuanphan Just following up on this one as would love to know how to achieve the following: Initial: Image Hover: Text (portfolio title) under image - Text 'COMING SOON' (content) over image I have attached an image showing what I currently have. I have managed to create a grey overlay on hover, red border on hover and black text underneath on hover (no pointer events). However I need the red 'COMING SOON' to appear in the centre of the image on hover and not sit with the black project title. The code I have used for the 'COMING SOON' element is below: (the code for the grey hover, red border and black text is generic to the rest of the site so this code is separate to the below. The red 'COMING SOON' hover only applies to this one image, not all images). a.grid-item[href*="/palmbaybungalow"] .portfolio-text:before { content: 'COMING SOON'; color: red; position: center !important; text-align: center !important; width: 100%; padding: 5; } Any help would be greatly appreciated! Thank you, Charlotte
-
Disable image click-through but keep hover
css_charlotte replied to css_charlotte's topic in Customize with code
It's linenewpassword - thank you! -
Site URL: https://echidna-gardenia-fcb4.squarespace.com/ I was wondering if there was a way to disable an image click-through while still keeping the hover effect? This is for a specific image on my site. I have set pointer-events to 'none' which disables the link, however removes the hover text. I can make the hover text visible again using the following code, however this is fixed in place on the image and the 'hover' effect is disabled. Is it possible to set pointer-events: none but keep the hover? Code: a.grid-item[href*="/comingsoon"] {pointer-events: none; } //disables click-through but removes hover// 117 a.grid-item[href*="/comingsoon"] .portfolio-text {opacity: 1 !important;} //reinstates hover text but text is fixed e.g. no hover// Thank you!
-
This worked perfectly, thank you so much!
-
It's linelogin - thank you!
-
Site URL: https://echidna-gardenia-fcb4.squarespace.com I'm using the Pazari template and am looking to remove some of the hover links on select images on the main portfolio page. For example, when you hover over one of the project images, the name of the project appears and this is then clickable (takes you through to a detailed page on this project). I need this feature on some of the images, but for others I want to remove both the text and the clickable link so these appear as a flat image only. Does anyone know if this is possible and how you create custom code for this? Assuming this code will need to apply to each individual image which is uploaded and I'm not sure if you can separate them? Any help on this would be great! Examples below showing how the text appears when you hover over the image and site link is: https://echidna-gardenia-fcb4.squarespace.com Thanks!