Hey Jonathan,
Did you change the login URL? I tried going to using /pdm-admin, /wp-admin, /wp-login.php, /login, /admin and they only redirect to your home page.
I’m also not 100% sure about what you need so please watch the quick video I’ve recorded below if that is the correct recreation of your description.
Not sure if you could see the change in color as #068dc8 and #29af82 are very close but it changes.
If that is what you need, my solution might not be the best but it’s simple. It’s the same as the original technique of adding Content Area elements. You add additional Content Areas and just reversing the effect or animation. This way also, you can easily change the speed of the colors separately. Here are the steps.
- Add 2 additional Content Area elements
- Assign
border__horizontal_hover class to the 1st additional column and border__vertical_hover to the 2nd additional column so you’re just replicating the steps in the original Creative Columns 1 video.\
- Replace all of the CSS with the following:
$el .border__horizontal,
$el .border__vertical {
position: absolute;
transition: transform .8s ease, -webkit-transform .8s ease;
}
$el .border__horizontal {
border-top: 2px solid #068dc8;
border-bottom: 2px solid #068dc8;
top: 0;
bottom: 0;
left: -10px;
right: -10px;
}
$el .border__vertical {
border-left: 2px solid #068dc8;
border-right: 2px solid #068dc8;
top: -10px;
bottom: -10px;
left: 0;
right: 0;
}
$el .border__horizontal::before,
$el .border__vertical::before {
content: '';
position: inherit;
border: inherit;
}
$el .border__horizontal::before {
top: -12px;
bottom: -12px;
left: 10px;
right: 10px;
}
$el .border__vertical::before {
top: 10px;
bottom: 10px;
left: -12px;
right: -12px;
}
$el:hover .border__horizontal {
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
$el:hover .border__vertical {
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
/* Reverse Content Areas */
$el .border__horizontal_hover,
$el .border__vertical_hover {
position: absolute;
transition: transform .8s ease, -webkit-transform .8s ease;
}
$el .border__horizontal_hover {
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
$el .border__vertical_hover {
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
$el .border__horizontal_hover {
border-top: 2px solid #29af82;
border-bottom: 2px solid #29af82;
top: 0;
bottom: 0;
left: -10px;
right: -10px;
}
$el .border__vertical_hover {
border-left: 2px solid #29af82;
border-right: 2px solid #29af82;
top: -10px;
bottom: -10px;
left: 0;
right: 0;
}
$el .border__horizontal_hover::before,
$el .border__vertical_hover::before {
content: '';
position: inherit;
border: inherit;
}
$el .border__horizontal_hover::before {
top: -12px;
bottom: -12px;
left: 10px;
right: 10px;
}
$el .border__vertical_hover::before {
top: 10px;
bottom: 10px;
left: -12px;
right: -12px;
}
$el:hover .border__horizontal_hover {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
$el:hover .border__vertical_hover {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
If you read the code above, you’ll see this CSS comment /* Reverse Content Areas */. That’s the start of the CSS for the additional columns and the reverse effect. The key there is the additional columns starts as hidden or scale 0 and hovering on the column they get scaled to 1.
-----------------------------------------------------------------------------------
If that doesn’t help, please update us with the correct login URL and maybe a series of screenshots of what you want to achieve.
Thanks.
