How to create the Super Saiyan effect in CSS / JS ?

Question

When I was a child, I used to read all Dragon Ball manga books.

The Super Saiyan effect (surrounding aura and lightning) is really cool!

Now I have an event page which lists all upcoming events in cards and it looks like this:

And here is the code

 <div class="col-sm-3 col-xs-12 event">
        <div class="row hidden-xs icon">
            <div class="title">16 Apr</div>
            <div class="event-time"><i>8:00PM</i></div>
            <div class="sub-title">Registration Opens 14 Apr</div>
        </div>

    <div class="row hidden-xs sub-icon">
        <div><span>LRC Thursday Night Run test long long</span></div>
        <div>
            <input type="button" class="btn btn-primary" value="Register" />
        </div>

    </div>

    <div class="row visible-xs-inline-block hidden-lg hidden-md hidden-sm event-sm">
        <div class="col-xs-4 event-left">
            <div class="event-day">16</div>
            <div class="event-month">apr</div>
            <div class="event-time"><i>8:00PM</i></div>
        </div>
        <div class="col-xs-8 event-right">
            <div class="event-notice">Registration Opens 14 Apr</div>
            <div class="event-title">LRC Night Run</div>
            <div class="event-slogan">Come run with us</div>
        </div>
    </div>
</div>

One of them is a special event.

So here is what I want:

I want this special event being surrounded by the "Super Saiyan" effect!

So it will look like this one:

(sorry the Saiyan isn't drawn beautifully, but the effect is well addressed)

So there will be many lightning strikes and flames around this event card, and they are flowing!

Sorry, I cannot come up with any css code for this one as I am not even sure that whether it can be done by css or not.

Is it possible?

---

Update

If this is impossible, how about the static lightning and flames(KI)? And it has to be responsive.

---

Update 2

Also, this page is responsive, and it would be terrible if the flame and lightning were mis-placed when the page got resized. So here is how it looks like on a smaller screen

---

Update 3

Here is my css code for event card:

.event {
    margin:10px;
    text-transform: uppercase;
}

.icon {
    background: #545454 url(../Content/img/event-icon.png) no-repeat center center;
    background-size:cover;
    min-height: 250px;
    height: 250px;
    width: auto;
    min-width: 250px;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.title{
  font-weight: 700;
  color:#6c6c6c;
  font-size: 67px;
  text-shadow: 0 1px 0 rgba(0,0,0,.5);

}

.sub-title{
  overflow: hidden;
  font-size: 18px;
  text-shadow: 0 1px 0 rgba(0,0,0,.4);
  color:#87e300;
  text-transform: uppercase;
  font-style: normal;
  font-weight: normal;
  font-family: 'TradeGothicW01-BoldCn20 675334', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  font-smoothing: antialiased;
}

.event-time{
  color:orange;
  font-size:25px;
}


.sub-icon {
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: space-around;
    background: #f3f3f3;
    font-size: 15px;
    font-weight: bold;
    font-style: normal;
    line-height: 1.1;
    text-transform: uppercase;
    font-family: 'TradeGothicW01-BoldCn20 675334', Helvetica, Arial, sans-serif;
}

    .sub-icon span {
        display: inline-block;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        overflow: hidden;
        width: 200px;
        white-space: nowrap;
        color:black;
    }

.sub-icon div{
  margin-top : 10px;
  margin-bottom:10px;
}


.event-day{
  font-size:24px;
  line-height:0.85;
  font-style:normal;
  font-weight:normal;
  color: #6c6c6c;
}
.event-month{
  color: #cccbcb;
  font-size: 42px;
}


.event-time{
  color:orange;
  font-size:25px;
}


.event-notice {
    color: #87e300;
    font-size: 14px;
    font-weight:600;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    line-height: .95;
    font-family: 'TradeGothicW01-BoldCn20 675334', Helvetica, Arial, sans-serif;
}

.event-title{
  font-size:16px;
  font-weight:800;
  color:white;
  font-family: 'TradeGothicW01-BoldCn20 675334', Helvetica, Arial, sans-serif;
}

.event-slogan{
  font-size:14px;
  font-weight:600;
  color: #999;
}

@media (max-width: 767px) {
    .event-sm {
        display: flex !important;
    }
}

Answer 1

SVG

CODEPEN

I am a bit unsure if you wanted the yellow KI glow or the lighting so i went for the lighting effect.

I reused a simple <svg> shape with the <use> element.

The lighting shape is taken from Gohan. The top left lighting.

body {
  margin: 0;
}
.main {
  background-color: black;
  width: 100vw;
  height: 100vh;
}
.calander {} .calander h2 {
  margin: 0;
  color: white;
  text-align: center;
}
.calander .event-grid {
  margin: 0 5%;
}
.event-grid .event {
  position: relative;
  display: inline-block;
  width: 30%;
  height: 250px;
  margin: 1%;
  text-align: center;
  background: -moz-radial-gradient(center, ellipse cover, #4c4c4c 0%, #212121 100%);
  /* FF3.6+ */
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #4c4c4c), color-stop(100%, #212121));
  /* Chrome,Safari4+ */
  background: -webkit-radial-gradient(center, ellipse cover, #4c4c4c 0%, #212121 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(center, ellipse cover, #4c4c4c 0%, #212121 100%);
  /* Opera 12+ */
  background: -ms-radial-gradient(center, ellipse cover, #4c4c4c 0%, #212121 100%);
  /* IE10+ */
  background: radial-gradient(ellipse at center, #4c4c4c 0%, #212121 100%);
}
.event .date {
  color: #666;
  font-size: 3em;
  margin-bottom: 10px;
  text-shadow: 0px 1px #222;
}
.event .time {
  font-size: 1.4em;
  color: #dd8834;
}
.event .note {
  font-size: 1.3em;
  color: LawnGreen;
}
.event .bottom-reg {
  position: absolute;
  bottom: 0;
  height: 25%;
  width: 100%;
  background-color: white;
}
.event .bottom-reg p {
  margin: 5px 0;
}
.event .bottom-reg input {
  text-align: center;
  color: white;
  background-color: #55f;
  border: 1px solid #99f;
}
::-webkit-input-placeholder {
  /* WebKit browsers */
  color: white;
  font-weight: bold;
}
:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: white;
  font-weight: bold;
}
::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: white;
  font-weight: bold;
}
:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: white;
  font-weight: bold;
}
.test {
  display: none;
}
.spesial {
  z-index: 5;
  position: absolute;
  top: -25%;
  left: -25%;
  width: 150%;
  height: 150%;
}

<div class="main">
  <section class="calander">
    <h2>UPCOMING EVENTS</h2>
    <div class="event-grid">
      <div class="event">
        <h1 class="date">16 APR</h1>
        <span class="time">8:00 PM</span>
        <br>
        <span class="note">registration</span>
        <div class="bottom-reg">
          <p>LRC</p>
          <input placeholder="REGISTER"></input>
        </div>
      </div>
      <div class="event">
        <h1 class="date">19 APR</h1>
        <span class="time">10:00 PM</span>
        <br>
        <span class="note">registration</span>
        <div class="bottom-reg">
          <p>LRC</p>
          <input placeholder="REGISTER"></input>
        </div>
        <div class="spesial">
          <svg width="100%" height="100%" viewBox="0 0 200 200">
            <use x="40" y="100" transform="scale(0.5) rotate(20)" xlink:href="#light" />
            <use x="150" y="-790" transform="scale(0.2) rotate(90)" xlink:href="#light" />
            <use x="0" y="200" transform="scale(0.35) rotate(-45)" xlink:href="#light" />
            <use x="-240" y="390" transform="scale(0.5) rotate(-70)" xlink:href="#light" />
            <use x="300" y="-90" transform="scale(0.4) rotate(90)" xlink:href="#light" />
          </svg>
        </div>
      </div>
      <div class="event">
        <h1 class="date">23 APR</h1>
        <span class="time">8:00 PM</span>
        <br>
        <span class="note">registation</span>
        <div class="bottom-reg">
          <p>LRC</p>
          <input placeholder="REGISTER" />
        </div>
      </div>
    </div>
  </section>
  <svg class="test" width="100px" height="100px" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
      <path fill="#ddf" stroke="#ddf" id="light" d="m 0,0 c 6.24111,-8.9445 10.61204,-23.77912 17.97353,-53.80856 l 29.7995,-5.55584 35.35534,41.92133 c -1.95372,12.45653 45.89675,34.80534 61.61931,34.34518 -17.63651,5.49982 -9.56977,24.91725 2.52538,36.87057 C 139.10793,46.26094 131.45087,39.06432 122.46831,22.22336 118.45247,16.48431 87.40919,-0.96167 83.63345,0.73967 c -9.2424,4.06941 -3.52888,14.963 -1.51523,18.60117 -4.31715,4.656 -7.89706,8.06774 -8.43836,13.6677 0.0873,-12.34933 1.5179,-42.45863 -5.49456,-26.14667 L 65.95578,-14.91769 C 61.11992,-21.99984 48.27857,-50.5446 47.89033,-37.93673 46.10689,-46.50735 39.22534,-49.00909 35.6512,-48.25273 17.657,-46.88454 17.9011,-38.9303 16.45831,-31.58521 7.76504,-6.22367 6.56293,-8.29891 0,0 Z"
      />
    </defs>
  </svg>
</div>

Answer 2

This might not be the best way, but a quick way could be to download an animated gif of super saiyan, make it transparent, edit the character out, then use css to overlay the image on your event.

With better photo editing software this could probably look a lot better, but this only took me about 5 minutes.

Here's the code: http://codepen.io/anon/pen/gpLMGr

<div class="event">
    <img id="saiyan" src="https://i.stack.imgur.com/CFoa1.gif" />
    <h1 class="date">19 APR</h1>
    <span class="time">10:00 PM</span>
    <br>
    <span class="note">registration</span>
    <div class="bottom-reg">
      <p>LRC</p>
      <input placeholder="REGISTER"></input>
    </div>
  </div>

<style>
    #saiyan {
      position: absolute;
      z-index: 1;
      width: 160%;
      height: 100%;
      left: -30%;
      top: 0;
    }
</style>

I just absolutely position the image over the rest of the event object, and have its width and height dependent on the event div.

Answer 3

_{Disclaimer: this code is for the lulz.}

Moved by curiosity, I've created a small example you might like:

Running demo on jsFiddle

---

Lightning effect

I've used the HTML5 Canvas Lightning from this fiddle, that is itself a fork of akm2's Lightning Points (Lightning 2); the canvas is then placed under a div with 0.99 of opacity, 20px oversized on each side, to give the effect of surrounding the boundaries, but only of few pixels.

Fire effect

The fire effect in CSS is easily achievable with the text-shadow property; I've taken parts of this but it is the same code I've seen dozens of time in many articles / fiddles, probably the first one ever is the one in the second link.

Since this applies only to text and not, for example, to divs, I've used the content attribute of the :before pseudo-element of the .sayan div to create a huge text composed by symbols (for a romantic reason, I've used the Go (悟) kanji from Goku (悟空), but the important is that it is not a recognizable alphabetic character, or goodbye aura effect... try it by yourself with content: 'a';), and I've put it between the canvas and the div with a negative z-index.

This is just an experiment for fun, not production code nor responsive stuff as asked in the question (even though if you resize the page, the divs move and the sayan div will retain its capabilities); my attempt to answer the question:

is it possible to do it, and how ?

, that I hope you liked.

If you want to transform it to something more serious, there is a lot of work to do (first of all, alter the script to make some dots moving only along the sides, to prevent having all of them inside the square), but I still suggest you to use a transparent animated PNG, or however something easier and less CPU-killer than this, declaratively made for the sake of the lulz ;)