Image links with caption rollover

Design help General
1

How would I achieve something like this designer does with his image links, with webflow?

2

Hi @Baracoot, are you trying to get image hover working? You can use the Hover trigger interaction to create those kinds of animations. Here is a tutorial, does this help?

Cheers!

3

I still don’t see how I would be able to achieve the same results.

4

Hi @Baracoot, if you are trying to achieve the same exact design, you might look into the source of the html on that page, and see if you can recognize any plugins or special css he is using to get the effect… You can probably make this in an interaction, the images may have to be setup a certain way to get it done. It is normally with these Custom Code things, that you have to play around with it, try to get a rough version working, then refine your interaction to achieve different results. It could be too, that if you need custom script to do this particular example, then you might need some jQuery, but my recommendation would be to go and find out everything you can about the example page, look at the page source, see what scripts are loading, check the CSS, look a the styles for that image link etc etc.

Some others on the forum, may also be able to share some design tips on that particular animation on hover.

I hope that helps, cheers, Dave

5

Hi @Baracoot, Just an update, I really did not see on that example site, how he was doing that, so I had to look elsewhere, but is this the effect you are looking for? I did this with just a little custom css… You can put different image, colors etc…

http://example-image-hover-diagonal.webflow.com/

Here is the CSS, which you paste in your HEAD:

<style>
    
    /* Hover Transition */
 
.wrapper {
  overflow: hidden;
  display: inline-block;
  position: relative;
  height: 200px;
}
  .wrapper:hover .overlay {
    right: 200px;
  }
  .wrapper:hover .description {
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    /* IE 5.5-7 */
    filter: alpha(opacity=100);
    /* Netscape */
    -moz-opacity: 1;
    /* Safari 1.x */
    -khtml-opacity: 1;
    /* Modern browsers */
    opacity: 1;
 
    transition: 1s ease-in;
    -webkit-transition: 1s ease-in;
  }
 
  .wrapper .overlay {
    display: block;
    position: absolute;
    height: 200px;
    width: 100%;
    top: 0;
    right: -100%;
 
    transition: .4s ease-out;
    -webkit-transition: .4s ease-out;
  }
    .wrapper .overlay .rectangle,
    .wrapper .overlay .arrow-left {
      position: absolute;
      top: 0;
    }
    .wrapper .overlay .rectangle {
      display: block;
      margin-left: 200px;
      width: 100%;
      height: 100%;
      background-color: rgba(255,255,255,.95);
    }
    .wrapper .overlay .arrow-left {
      position: relative;
      left: 0;
      width: 0; 
      height: 0; 
      top: 0;
      bottom: 0;
 
      border-bottom: 200px solid transparent; 
      border-right: 200px solid rgba(255,255,255,.95); 
    }
 
  .wrapper .description {
    text-align: left;
    position: absolute;
    padding: 30px 50px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: #cc6812;
 
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    /* IE 5.5-7 */
    filter: alpha(opacity=0);
    /* Netscape */
    -moz-opacity: 0;
    /* Safari 1.x */
    -khtml-opacity: 0;
    /* Modern browsers */
    opacity: 0;
 
    transition: .2s ease-out;
    -webkit-transition: .2s ease-out;
  }
    .wrapper .description h3 {
      text-align: center;
      font-size: 20px;
      margin-bottom: 25px;
      font-weight: bold;
    }
 
  .wrapper .link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    margin: 0;
  }
 
  .wrapper img {
    vertical-align: bottom;
  }
    
</style>

And here is the project preview link:

https://webflow.com/design/example-image-hover-diagonal?preview=c96e5fb0a893fa8a6206184fea65daf5

Cheers!

1 Like
6

thank you, yes. this is great. :slight_smile:

1 Like