JSFiddle - React, Tailwind, and code Playground

by saturn721

HTML

<div class="container bodier">
        <!-- begin about container -->
        <div class="jumbotron text-center">
                
                 <h1 id="name-form">GoldenBloodGirls<sup>&copy;</sup></h1><h3>russian colonial corporation </h3>
                 
                
        </div>     
        <div class="row intro">
          <div class="col-md-4 col-sm-4 hidden-xs"><p> Лицензия комиссии искусственных существ администрации Американских Объединенных Территорий<br />
Лицензия бюро искусственного интеллекта Европейского Союза<br />
Лицензия комитета искусственного интеллекта Китайского Союза Свободных Республик<br />
Лицензия администрации Колониальной Администрации Общей Сибири<br />
Все права защищены общей декларацией авторских прав<br />
Не является публичной оффертой<br />
Единая линия поддержки клиентов - [email protected], постфикс вербальной связи - *721 <br /></p>
<h4 class="text-info">Удовольствия будущего доступны сейчас!</h4>
          <br>
          
          </div>
          <div class="col-md-8 col-sm-8"></div>
        </div>
        <div class="main row">
          <div class="col-md-3 col-sm-6 col-lg-3 col-xs-12 line"><img src="1.jpg" alt="fist" /><p>Мы производим тян с 2022 года и являемся лидерами на всем колониальном пространстве. В производстве используется только генетически подобные материалы. Вагины наших тян неотличимы от натуральных по всем тестам Вудера. Вы будете приятно удивлены дешевизной их обслуживания. Мы даем годовую гарантию на кожные и волосяные покровы</p><p>

Оснащение самой современной системой искусственного интеллекта, позволит вашей игрушке полностью инкорпорироватся в общество и выполнять не только сексуальные, но и простейшие бытовые услуги. Круглосуточная техническая поддержка поможет в самой трудной ситуации. Ограничение физической мощности делает наших тян полностью безопасными и покорными</p></div>
          <div class="col-md-3 col-sm-6 col-lg-3 col-xs-12 line"><img src="2.jpg" alt="second" /><p>Теперь мы...

CSS

.main 
    div 
        @for $i from 1 through 4
            &:nth-child(#{$i})
                overflow: hidden
                height: 400px
                border-radius: 6px
                border: solid 0.1px #B3A679
                box-shadow: 0px 0px 8px 5px #B3A679
                transform: perspective(100px) rotateY(2deg)
                -o-transform: perspective(100px) rotateY(2deg)
                -ms-transform: perspective(100px) rotateY(2deg)
                -moz-transform: perspective(100px) rotateY(2deg)
                -webkit-transform: perspective(100px) rotateY(2deg)
                background: #eab92d; /* Old browsers */
                background: -moz-linear-gradient(left,  #B3A679 0%, #977E45 100%); /* FF3.6-15 */
                background: -webkit-linear-gradient(left,  #B3A679 0% ,#977E45 100%); /* Chrome10-25,Safari5.1-6 */
                background: linear-gradient(to right,  #B3A679 0%, #977E45 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eab92d', endColorstr='#c79810',GradientType=1 ); /* IE6-9 */
                //transition: width 1s
                img
                    cursor: pointer
                    float: left
                    margin: 8px
.main
    div
        @for $i from 1 through 4
            &:nth-child(#{$i}):hover
                transform: rotateY(0deg)!important
                z-index: 1000
                border: solid 0.1px #664D35!important
                box-shadow: 12px 0px 8px 5px #664D35!important
                width: 25%
                position: absolute
                left: $i*25-25%
                animation: wid 2s linear 1 forwards
                background: #BBA89D!important
    

@-webkit-keyframes wid
    0%
        width: 20%
    25%
        width: 40%
    50%
        width: 60%
    75%
        width: 80%
    100%
        width: 100%

@-moz-keyframes wid
    0%
        width: 20%
   ...

JavaScript

(function() {

  $(document).ready(function() {
    $(".line").hover(function() {
      $(this).siblings().css({opacity: '0.7',});
    }, function() {
      return $(this).siblings().css({
        opacity: '1'
      });
    });
  });

}).call(this);