Блог

Главная - Вопросы по программированию - Когда я переключаю div влево, правая сторона перемещает мое изображение, если верхняя часть изображения не на всю страницу

Когда я переключаю div влево, правая сторона перемещает мое изображение, если верхняя часть изображения не на всю страницу

#html #jquery #css #css-animations #slidetoggle

#HTML #jquery #css #css-анимация #slidetoggle

Вопрос:

У меня проблема, я хочу переключить div влево (это текст), а правую сторону (это изображение) переместить на SlidetToggle в качестве анимации, если верхняя часть изображения отсутствует на странице. Я объясняю:

Код JSFiddle

Если вы нажмете на кнопку узнать больше, изображение переместится, но я не хочу, я просто хочу, чтобы текст перемещался и переключался

в этом и заключается проблема

это мой код :

   $(".button-2").click(function(){
    $(".desc-2").slideToggle();
  });
  $(".button-1").click(function(){
    $(".desc-1").slideToggle();
  }); 
 .wrapper {
  overflow:hidden;
  position: relative;
  display:flex;
  width:100%;
  margin-right:auto;
  margin-left:auto;
  justify-content: center;
  align-items: center;
}

.wrapper .image{
  width:40%;
  vertical-align:center;
  z-index: 1;
}

.wrapper img{
  max-width:100%;
  vertical-align: middle;
  display: inline-block;
}

.two {
  position: relative;
  vertical-align: center;
  justify-content: center;
  overflow:hidden;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}

.two p{
  padding-left: 15%;
  padding-right: 15%;
  padding-top: 5%;
}

.marge-text{
  margin:5%;
  padding: 0 10%;
}

.marge-titre{
  margin:5%;
}

.wrapper .button-more {
  border: 1px solid #b3b3b3;
  border-radius: 1em;
  padding: 1em 2em;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: inherit;
  display: inline-block;
  background-color: #fff;
}


.desc-2,.desc-1{
  display: none;
}

@media screen and (min-width: 480px) {
  .two{
    width:75%;
  }
}

@media screen and (max-width: 480px) {
  .wrapper {
     display: block;
  }
  .wrapper .image {
    width: 100%;
  }
  .two {
    font-size: 14px;
  }
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="panel" data-color="black">
      <div class="wrapper">
        <img class="image" src="https://www.pngkit.com/png/full/8-80985_largest-height-gains-among-iranian-men-height-clipart.png" alt="">
        <div class="two">
          <h1 class="marge-text">text1</h1>
          <button class="button-3">know more</button>
          <p class="desc-3">
            Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum             Lorem ipsum Lorem ipsum 
          </p>
        </div>
      </div>
    </div>    
    
    
    <div class="panel" data-color="white">
      <div class="wrapper">
        <div class="two">
          <h1>text2</h1>
          <button class="button-1">know more</button>
          <p class="desc-1">
            Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
          </p>
        </div>
        <img class="image" src="https://www.pngkit.com/png/full/8-80985_largest-height-gains-among-iranian-men-height-clipart.png" alt="">
      </div>
    </div>
    
<div class="panel" data-color="black">
      <div class="wrapper">
        <img class="image" src="https://www.pngkit.com/png/full/8-80985_largest-height-gains-among-iranian-men-height-clipart.png" alt="">
        <div class="two">
          <h1>text1</h1>
          <button class="button-2">know more</button>
          <p class="desc-2">
            Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum             Lorem ipsum Lorem ipsum 
          </p>
        </div>
      </div>
    </div>

Кто-нибудь может мне помочь?

Метки: , ,