Jump to content

css_charlotte

Member
  • Posts

    25
  • Joined

  • Last visited

Posts posted by css_charlotte

  1. 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>

    image.png.e2cbeaa7f24bec1999886b1ff81ba920.png

     

    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:

    image.thumb.png.b9b3e28bb69f077cf546877204f3be0f.png

     

    Work page (duplicated homepage/portfolio page - tweaked to change orientation and column number) which shows the project title displaying over the image:

    image.thumb.png.08fb45e72acecd74cedc66269a825597.png

     

    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!

  2. 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 

     

    Screen Shot 2023-02-13 at 19.16.52.png

  3. 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 

    Screen Shot 2023-02-13 at 14.48.08.png

  4. 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 

    Screen Shot 2022-06-30 at 13.27.28.png

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

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

    Screen Shot 2020-09-03 at 11.25.55.png

    Screen Shot 2020-09-03 at 11.25.43.png

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.