Change Index Image on Hover

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%;
  }
}

The url doesn't exist. Can you check it?

http://contrivium.com/new-index

On 7/13/2022 at 9:13 AM, tuanphan said:

The url doesn't exist. Can you check it?

http://contrivium.com/new-index

Pardon me, I altered the url and forgot to update this post. Here is the page:

http://contrivium.com/index-section-projects

Add this to Design > Custom CSS (for first image). If it works, we will send code for other images

a.project[href="/locusneura/"]:hover img {
    content: url(https://cdn.pixabay.com/photo/2022/06/25/23/41/ladybug-7284337__480.jpg);
}

6 hours ago, tuanphan said:

Add this to Design > Custom CSS (for first image). If it works, we will send code for other images

a.project[href="/locusneura/"]:hover img {
    content: url(https://cdn.pixabay.com/photo/2022/06/25/23/41/ladybug-7284337__480.jpg);
}

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

On 7/15/2022 at 9:53 PM, eddy_contrivium said:

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

 

Try this new code

.thumbnail-layout-autocolumns #projectThumbs .project:hover img {
    visibility: hidden;
    transition: all 0.3s;
}
a.project[href="/locusneura/"] .content-fill {
    transition: all 0.3s;
     background-image: url(https://static1.squarespace.com/static/56e081fda3360c2379a159cc/t/62d17b232ffc3e2ab8d051d8/1657895715711/locus-neura_thumb-transition.jpg);
       background-size: cover;
    background-repeat: no-repeat;
}
a.project[href="/locusneura/"]:hover .content-fill {
     transition: all 0.3s;
}

7 hours ago, tuanphan said:

Try this new code

.thumbnail-layout-autocolumns #projectThumbs .project:hover img {
    visibility: hidden;
    transition: all 0.3s;
}
a.project[href="/locusneura/"] .content-fill {
    transition: all 0.3s;
     background-image: url(https://static1.squarespace.com/static/56e081fda3360c2379a159cc/t/62d17b232ffc3e2ab8d051d8/1657895715711/locus-neura_thumb-transition.jpg);
       background-size: cover;
    background-repeat: no-repeat;
}
a.project[href="/locusneura/"]:hover .content-fill {
     transition: all 0.3s;
}

 

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.