Jump to content

eddy_contrivium

Member
  • Posts

    7
  • Joined

  • Last visited

eddy_contrivium's Achievements

Level 2

Level 2 (2/20)

0

Reputation

  1. With the new code the transition image, maintains its original aspect ratio, which is good. However it now crops whatever doesn't fit within the original thumbnail size. Is there a way for the transition image to match the height of the original thumbnail, and have a white margin to fill the width, to match the same dimensions of the first thumbnail? Thanks, see below.
  2. It works! I forgot to mention, the images attached were meant for href="/sk-residence/", however it was really easy to change that. As for the transition image, I was quickly able to copy and paste in place of the "ladybug" url. Although, two small details, the transition image (screenshot below) looks stretched to match the first image's ratio. Is there a way for the transition image to maintain is original aspect and not look warped? Second, what is the script to have a slower transition speed? Something that allows for a smoother rollover. Thanks
  3. Pardon me, I altered the url and forgot to update this post. Here is the page: http://contrivium.com/index-section-projects
  4. Site URL: http://contrivium.com/new-index I am using the Avenue Template. Currently I have an index page featuring thumbnails that show the thumb title upon hovering. But I'm also looking to have the thumbnail transition to a different image when rolling over as well. I found a helpful code from a website, but the code is tailored for a blog collection page, using a section id. Is there a code that can be implemented for an index page. Here is my site: http://contrivium.com/new-index and attached is original thumbnail image along with the transition image. Here is the tutorial I found, but had trouble using: https://www.will-myers.com/articles/replace-thumbnail-image-on-hover featuring this code: /** * [PAGE NAME] * Display New Image on Hover **/ section[data-section-id="123"] { //All Item Settings .image-wrapper img { opacity: 1; transition: opacity 0.3s ease; } .image-wrapper { background-size: cover; } //Template .image-wrapper[href*="POST_URL"] { &:hover img { opacity: 0; } background-image: url("NEW_IMG_URL"); background-position: 50% 50%; } }
  5. Pardon the confusion, the link to the website is not mine, but rather what I'm trying to achieve. Here is my website page for context, under "Projects" index. http://contrivium.com/new-index
  6. I am currently using Avenue template. In the index page, the index thumb titles are overlayed center to the thumb nail. However I would like the text to be on the bottom side of the image, rather than center. Here is a link to a website for reference, under the "work" page. https://www.campos.studio/
×
×
  • 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.