How To Create A Filtering Enabled Super Saiyan Script

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

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

At present 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 grade="row hidden-xs icon">             <div class="title">xvi Apr</div>             <div class="consequence-time"><i>eight:00PM</i></div>             <div class="sub-title">Registration Opens xiv April</div>         </div>      <div grade="row hidden-xs sub-icon">         <div><bridge>LRC Thursday Dark Run exam long long</bridge></div>         <div>             <input type="button" grade="btn btn-chief" value="Register" />         </div>      </div>      <div class="row visible-xs-inline-block subconscious-lg hidden-md subconscious-sm consequence-sm">         <div grade="col-xs-4 event-left">             <div class="event-day">16</div>             <div course="upshot-calendar month">apr</div>             <div class="event-time"><i>8:00PM</i></div>         </div>         <div class="col-xs-8 issue-right">             <div class="result-discover">Registration Opens fourteen Apr</div>             <div class="event-title">LRC Dark Run</div>             <div form="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 past the "Super Saiyan" effect!

And so it will expect like this one:

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

So there will exist many lightning strikes and flames around this upshot carte, and they are flowing!

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

Is it possible?

---

Update

If this is impossible, how well-nigh the static lightning and flames(KI)? And it has to exist responsive.

---

Update two

Also, this page is responsive, and information technology 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: capital; }  .icon {     background: #545454 url(../Content/img/event-icon.png) no-echo center center;     groundwork-size:cover;     min-meridian: 250px;     height: 250px;     width: auto;     min-width: 250px;     display: flex;     -ms-flex-direction: column;     flex-management: column;     align-items: heart;     justify-content: center; }  .title{   font-weight: 700;   colour:#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: upper-case letter;   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 {     brandish: flex;     -ms-flex-direction: column;     flex-direction: column;     justify-content: center;     align-items: eye;     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 {         brandish: inline-cake;         -ms-text-overflow: ellipsis;         -o-text-overflow: ellipsis;         text-overflow: ellipsis;         overflow: subconscious;         width: 200px;         white-space: nowrap;         color:blackness;     }  .sub-icon div{   margin-top : 10px;   margin-bottom:10px; }   .upshot-day{   font-size:24px;   line-summit:0.85;   font-way:normal;   font-weight:normal;   color: #6c6c6c; } .consequence-calendar month{   color: #cccbcb;   font-size: 42px; }   .event-time{   color:orange;   font-size:25px; }   .event-discover {     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-elevation: .95;     font-family: 'TradeGothicW01-BoldCn20 675334', Helvetica, Arial, sans-serif; }  .upshot-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;   colour: #999; }  @media (max-width: 767px) {     .event-sm {         brandish: flex !important;     } }                  

How To Create A Filtering Enabled Super Saiyan Script,

Source: https://stackoverflow.com/questions/30437768/how-to-create-the-super-saiyan-effect-in-css-js

Posted by: couturesaut1950.blogspot.com

Share this post