如何在一行上获得 3d 瓷砖并在悬停时获得缩放效果？

Posted 2023-05-08

【中文标题】如何在一行上获得 3d 瓷砖并在悬停时获得缩放效果？

【英文标题】：How do I get 3d tiles on a row and zoom effect on hover?

【发布时间】：2020-01-10 23:05:51

【问题描述】：

我正在尝试连续获得 3d 瓷砖，我想放大悬停，它应该是响应式的。我正在尝试获得以下外观，

我正在使用 bootstrap 3 和 Wordpress。请指导我如何实现这一目标

https://www.overdrive.com

<!-- begin snippet: js hide: false console: true babel: false -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

    <!------ Include the above in your HEAD tag ---------->
    <div class="container">
            <div class ="row">
                <img src="https://img.fireden.net/co/image/1484/60/1484607166775.jpg">
                <img src="https://khms0.googleapis.com/kh?v=852&hl=en-US&x=2358&y=3247&z=13">
                <img src="https://img.fireden.net/co/image/1484/60/1484607166775.jpg">
                <img src="https://khms0.googleapis.com/kh?v=852&hl=en-US&x=2358&y=3247&z=13">
                <img src="https://img.fireden.net/co/image/1484/60/1484607166775.jpg">
               
                
            </div>

        	
        </div>
    <div class="container">
    <hr>
      <div class="row">
      
        <div class="
        img-hover" style="float:left">
        
          <img class="img-responsive img-rounded" src="http://placehold.it/300">
          
                <img class="https://khms0.googleapis.com/kh?v=852&hl=en-US&x=2358&y=3247&z=13">
          <img class="img-responsive img-rounded" src="http://placehold.it/300">

        
        </div>
      
      </div>
      
    </div>

我已经添加了我尝试过的两种方法。我无法得到那个。请帮忙

【问题讨论】：

请向我们展示您的代码以及您尝试过的内容。

真的很抱歉@CarstenLøvboAndersen，我是stackoverfllow的新手..所以没有包含代码..我会马上更新

@CarstenLøvboAndersen，我已经用我的代码更新了问题

@CarstenLøvboAndersen，你能建议我如何实现所需的用户界面

【参考方案1】：

当然，我将 RWD 支持留给你 ;)

.container 
  border: 1px solid red;


ul 
  margin: 30px auto;


ul li 
  vertical-align: middle;
  margin: 0 -27px;
  position: relative;


ul li:hover 
  z-index: 5;


ul li img 
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  transition: all 400ms ease;
  cursor: pointer;


ul li img:hover 
  max-width: 193px !important;
  box-shadow: 5px 5px 25px #000;


ul li:nth-child(1) img 
  max-width: 153px;
  z-index: 1;


ul li:nth-child(2) img 
  max-width: 173px;
  z-index: 2;


ul li:nth-child(3) img 
  max-width: 193px;
  z-index: 3;


ul li:nth-child(4) img 
  max-width: 173px;
  z-index: 2;


ul li:nth-child(5) img 
  max-width: 153px;
  z-index: 1;

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <ul class="list-inline">
      <li class="list-inline-item"><img src="https://img.fireden.net/co/image/1484/60/1484607166775.jpg"></li>
      <li class="list-inline-item"><img src="https://khms0.googleapis.com/kh?v=852&hl=en-US&x=2358&y=3247&z=13"></li>
      <li class="list-inline-item"><img src="https://img.fireden.net/co/image/1484/60/1484607166775.jpg"></li>
      <li class="list-inline-item"><img src="https://khms0.googleapis.com/kh?v=852&hl=en-US&x=2358&y=3247&z=13"></li>
      <li class="list-inline-item"><img src="https://img.fireden.net/co/image/1484/60/1484607166775.jpg"></li>
    </ul>
  </div>
</div>

【讨论】：

谢谢。它可以在所有屏幕上都响应吗？

在我写 RWD 时，我把它留给你 ;)。添加 rwd 支持并以不同的分辨率隐藏单个 nth-child。按照您提供的示例https://www.overdrive.com 非常清晰。