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-

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

2-

.mainHolderfigcaption.fig11 {
    left: -30px; /* change this */bottom: 30px; /* change this */
}
.mainHolderfigure:hoverfigcaption.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:

.mainHolderfigure {
    width: 200px;
    height: 200px;
    position: relative;
}

.mainHolderfigure:hoverfigcaption.fig22 {
    left: -140px;
    top: -15px;
}

Share

You may like these posts

• 
  Onserverchange Event Not Firing
• 
  Slick Slider Text On Top Of Images
• 
  Show And Hide Active Class In Li When Clicked On Input Button
• 
  Check If Canvas Is Blank In Fabric.js