Jump to content

Displaying Text on A Hover & In 2 Columns - Portfolio

Recommended Posts

Hello, 

I am looking for help with three things. My website is https://www.pennedbysteph.com/. Thank you in advance!! 

1. Display text on rollover/hover on a portfolio page.  I'd like to add a brief header and description so a reader can get a synopsis before clicking through. I'd love to be able to create something similar to this page https://www.justindwright.com/ where there's a brand, description, and button to click through.

2. Create a 2-column view that stays the same on web and mobile. I'd like to display my text on each project page in 2 columns. Currently I've done that on web (as can be seen here https://www.pennedbysteph.com/work/january-content) but it's done as 2 text blocks. On mobile, the view becomes distorted. I've edited the mobile view as best as possible (to avoid unnecessary spaces/gaps), but due to the length of the copy it looks like one long scroll. How can I have it display the same on both web and mobile? (The website I liked above does a great job of that). 

3. Create a top 10 and all work section From the portfolio page, is there a way to create a header option where people can choose to see all work or just the top 10 like here? (https://www.justindwright.com/allwork.html). Thank you!! 

 

Link to comment
  • Replies 6
  • Views 819
  • Created
  • Last Reply

Top Posters In This Topic

#1. To add Description, see #2 in this thread

with button, title and button will use same link or different link?

#2. Add this code to Custom CSS box

/* Portfolio 2 columns on mobile */
@media screen and (max-width:767px) {
div#gridThumbs {
    grid-template-columns: repeat(2,1fr) !important;
    grid-gap: 5px 5px !important;
}
}

#3. You can create a new Top 10 page > Use Gallery Section and link to portfolio items, then use this CSS code to achieve Title/Overlay on hover

figure.gallery-grid-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
figcaption.gallery-caption .gallery-caption-wrapper p.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
.gallery-grid-item:hover .gallery-caption-wrapper p.gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-grid-item-wrapper a:after {
    background: #f4f6ea; /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-grid-item:hover .gallery-grid-item-wrapper a:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Thank you so much. For the first question, once I add the project name, title, and button (all will go to the same project link), how do I get the rollover to white out as was done on the example portfolio page I shared? I would love the main image that represents the project to show the project name, title, and button in a white box with the rollover. It would all be clickable but only go to the one link of the project page (as was done here). 

The idea would be to provide people with a bit of context before they click on the project. 

Link to comment

Thank you so much. For the first question, once I add the project name, title, and button (all will go to the same project link), how do I get the rollover to white out as was done on the example portfolio page I shared? I would love the main image that represents the project to show the project name, title, and button in a white box with the rollover. It would all be clickable but only go to the one link of the project page (as was done here). 

The idea would be to provide people with a bit of context before they click on the project. 

For the two columns, where do I add that custom code in the CSS box? I added it, but it didn't update to two columns (copy seemed to remain the same). I'm wondering if I have a code in there that might currently be overriding it accidentally? I've attached a screenshot of what I currently have and how it's not reflecting in mobile view.

Screen Shot 2023-08-07 at 1.39.04 PM.png

Link to comment

Recently SS has a problem with code on edit mode, so you can save then check on live mode or incognito window (and don't login to site).

You mean achieve same as this hover layout? or same button only (button with outline, white background, black text)

image.png.d48aea35baec7f2e3c8ba004d3b98e8f.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Add to Design > Custom CSS or Website > Website Tools > Custom CSS

h3.portfolio-title:after {
    content: "View more";
    display: block;
    background-color: white;
    width: 150px;
    font-size: 16px;
    border: 2px solid black;
    margin: 0 auto;
    margin-top: 20px;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • 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.