Animated Ribbon With Css - Ribbon Position

March 03, 2024 Post a Comment

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

Copy

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

Solution 2:

Very Simple:

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

Baca Juga

Css Checkbox Without Input Tag Onclick , Pure Js
How Do I Stop Jquery Tourbus From Creating Two Instances On Click?
Changing Part Of The Html Page Without Refreshing Whole Page

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

Html5 Cafe

Animated Ribbon With Css - Ribbon Position

Solution 2:

Solution 3:

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