Wie kann man Bilder mit Hover Effekt noch kreativ in eine Webseite einblenden lassen?

Ich liebe ja Bildanimationen und freue mich immer, wenn Bilder auch kreativ eingeblendet werden. Heute möchte ich euch auch mal einen Weg zeigen, wie man ein Bild kreativ einblenden kann, und zwar nur über einen Hover-Effekt.

Man sieht zuerst nur einen Strich, der von links bis rechts geht, und wenn man mit der Maus darübergeht, verschwindet diese Linie und das Bild taucht auf.

So etwas sah man früher immer wieder – heute fast nicht mehr, und darum bringe ich diesen kleinen Trick jetzt zurück.

Video

HTML

<div class="show">
      <img src="ssh-sql-hochladen.jpg" alt="Beschreibung" />
    </div>

CSS

body {
        background: #8c8b8b;
      }
      .show {
        position: relative;
        display: inline-block;
        overflow: hidden;
        align-self: flex-start; 
        height: fit-content;
        border: 1px solid white;
      }

      .show img {
        display: block;
        width: 100%;
        clip-path: inset(50% 0);
        transform: scale(1.15);
        transition:
          clip-path 0.4s ease,
          transform 0.4s ease;
      }

      .show:hover img {
        clip-path: inset(0);
        transform: scale(1);
      }

      .show::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        height: 2px;
        background: black;
        transform: translateY(-50%);
        transition: opacity 0.4s ease;
        z-index: 2;
      }

      .show:hover::after {
        opacity: 0;
      }