具有重要图像的silde div

Question

我有一个div滑动，通过添加一个类来改变他的正确值并且它工作正常，但是这个div中有一个图像我需要它响应总是显示图像

现在当它关闭时，我想只看到图片（猜测我需要像右边一段距离的固定图像）

    .comingnext {
   transition-timing-function: ease;
   float: right;
   transition: right 2s;
   position: absolute;
   right:-70%;
   /**/height:20%;
   width:100%;
   top: 50%;
   z-index: 1000;

   padding: 5px;
   color: #FFFFFF;
   font-weight: bold;


}
.comingnext.out {
    right:-4%

}

我的HTML：

<div ng-controller="toggleCtrl" class="comingnext" ng-class="class" ng-click="toggleClass()">
        <a class="nextthumb thumbnail-shadow item item-thumbnail-left card" href="#">

                          <img src="{{allTracks.NextTrack.ImgUrl}}">
                          <h2>Coming up next:</h2>
                          <h2>{{allTracks.NextTrack.Song}}</h2>
                          <p>{{allTracks.NextTrack.Artist}}</p>
                          <p>{{allTracks.NextTrack.Album}}</p>

                      </a>
                    </div>

Answer 1

我认为你正在使用带有文字的正确图像，对吧？ 因此，只需使用媒体查询并将display:none放入图像文本即可。另一种解决方案可能是在其父级中使用position: relative和position: absolute，然后根据需要更改图像位置。 希望这有效。