first commit 2

rb/rb.mod/banner/skin/border_anim/style.css

@@ -0,0 +1,71 @@
+.rb-banner-border-anim {
+    position: relative;
+    overflow: hidden;
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+
+.rb-banner-border-anim a {
+    display: block;
+    text-decoration: none;
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+.rb-banner-border-anim .banner-image {
+    width: 100%;
+    height: 100%;
+}
+
+.rb-banner-border-anim .banner-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}
+
+.rb-banner-border-anim .banner-content {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: #fff;
+    text-align: center;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    background: rgba(0,0,0,0.5);
+    padding: 10px 20px;
+    border-radius: 5px;
+    width: 90%;
+}
+
+.rb-banner-border-anim:hover .banner-content {
+    opacity: 1;
+}
+
+.rb-banner-border-anim h3 {
+    margin: 0;
+    font-size: 1.2rem;
+    font-weight: 700;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.rb-banner-border-anim [class^="border-"] {
+    position: absolute;
+    background-color: #fff;
+    transition: all 0.3s ease-in-out;
+}
+.rb-banner-border-anim .border-top-left, .rb-banner-border-anim .border-top-right { height: 3px; width: 0; }
+.rb-banner-border-anim .border-bottom-left, .rb-banner-border-anim .border-bottom-right { width: 3px; height: 0; }
+
+.rb-banner-border-anim .border-top-left { top: 0; left: 0; }
+.rb-banner-border-anim .border-top-right { top: 0; right: 0; }
+.rb-banner-border-anim .border-bottom-left { bottom: 0; left: 0; }
+.rb-banner-border-anim .border-bottom-right { bottom: 0; right: 0; }
+
+.rb-banner-border-anim:hover .border-top-left, .rb-banner-border-anim:hover .border-top-right { width: 100%; }
+.rb-banner-border-anim:hover .border-bottom-left, .rb-banner-border-anim:hover .border-bottom-right { height: 100%; }