Skip to content Skip to sidebar Skip to footer

Animated Ribbon With CSS - Ribbon Position

JSFiddle: http://jsfiddle.net/jvtt8kgz/ HTML:
Copy

Then you need to adjust the "left" values of your ribbons accordingly.


Solution 2:

Very Simple:

1-

.mainHolder figure {
    margin: 0; /* add this */
    padding: 0; /* add this */
}

2-

.mainHolder figcaption.fig11 {
    left: -30px; /* change this */
    bottom: 30px; /* change this */
}
.mainHolder figure:hover figcaption.fig22 {
    left: -120px; /* change this */
    top: 30px; /* change this */
}

Demo: http://jsfiddle.net/jvtt8kgz/3/


Solution 3:

Try removing the overflow: hidden from .mainHolder figure and then adjusting the :hover for figcaption.fig22, thusly:

.mainHolder figure {
    width: 200px;
    height: 200px;
    position: relative;
}

.mainHolder figure:hover figcaption.fig22 {
    left: -140px;
    top: -15px;
}

Post a Comment for "Animated Ribbon With CSS - Ribbon Position"