Animated Ribbon With CSS - Ribbon Position
JSFiddle: http://jsfiddle.net/jvtt8kgz/ HTML:
Then you need to adjust the "left" values of your ribbons accordingly.
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 */
}
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"