Tomasina2323 Posted August 3, 2023 Posted August 3, 2023 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!!
tuanphan Posted August 4, 2023 Posted August 4, 2023 #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!)
Tomasina2323 Posted August 7, 2023 Author Posted August 7, 2023 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.
Tomasina2323 Posted August 7, 2023 Author Posted August 7, 2023 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.
tuanphan Posted August 9, 2023 Posted August 9, 2023 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) 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!)
Tomasina2323 Posted August 10, 2023 Author Posted August 10, 2023 Thanks. I am looking to achieve that same hover and button layout. Is there a code that can be used?
tuanphan Posted August 12, 2023 Posted August 12, 2023 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!)
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment