Question

我想建立一个网站项目的主页我正在和一些朋友一起做，其中整个页面基本上是三个图像，一个接一个，如下：

|1|2|3| --hover--> |1    ||| or --hover--> ||2     || or --hover--> |||3    |

每个“square”带有代表图像的数字。挤压的“正方形”就像非常小的开口，可以通过悬停在另一个图像上来切换到另一个图像。

现在我的想法是当用户将鼠标悬停在剩余的两张图片上时，让每张图片都展开。

我发现了这个（http://jsfiddle.net/harmeister/a4n6e/18/），这正是我正在寻找的东西，但我不能很好地适应我的需要。理想情况下，某些文字会出现在展开的图片上，但我想我知道该怎么做。

我不确定这在纯CSS中是否可行，但这是我更喜欢的。

Answer 1

修改我相信你正在寻找这个。

＆＃13;
＆＃13;
/*Now the styles*/ * { margin: 0; padding: 0; } body { background: #ccc; font-family: arial, verdana, tahoma; } /*Time to apply widths for accordian to work Width of image = 640px total images = 5 so width of hovered image = 640px width of un-hovered image = 40px - you can set this to anything so total container width = 640 + 40*4 = 800px; default width = 800/5 = 160px; */ .accordian { width: 805px; height: 320px; overflow: hidden; /*Time for some styling*/ margin: 100px auto; box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); } /*A small hack to prevent flickering on some browsers*/ .accordian ul { width: 2000px; /*This will give ample space to the last item to move instead of falling down/flickering during hovers.*/ } .accordian li { position: relative; display: block; width: 160px; float: left; border-left: 1px solid #888; box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); /*Transitions to give animation effect*/ transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; /*If you hover on the images now you should be able to see the basic accordian*/ } /*Reduce with of un-hovered elements*/ .accordian ul:hover li {width: 40px;} /*Lets apply hover effects now*/ /*The LI hover style should override the UL hover style*/ .accordian ul li:hover {width: 640px;} .accordian li img { display: block; } /*Image title styles*/ .image_title { background: rgba(0, 0, 0, 0.5); position: absolute; left: 0; bottom: 0; width: 640px; } .image_title a { display: block; color: #fff; text-decoration: none; padding: 20px; font-size: 16px; }
＆＃13;
<div class="accordian"> <ul> <li> <div class="image_title"> <a href="#">KungFu Panda</a> </div> <a href="#"> <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg"/> </a> </li> <li> <div class="image_title"> <a href="#">Toy Story 2</a> </div> <a href="#"> <img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg"/> </a> </li> <li> <div class="image_title"> <a href="#">Wall-E</a> </div> <a href="#"> <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg"/> </a> </li> <li> <div class="image_title"> <a href="#">Up</a> </div> <a href="#"> <img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg"/> </a> </li> <li> <div class="image_title"> <a href="#">Cars 2</a> </div> <a href="#"> <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg"/> </a> </li> </ul> </div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

1。这是一个基本的纯css，其中图像相互叠加，并使用z-index显示悬停时的全宽。这是响应。

<强>拨弄

https://jsfiddle.net/Hastig/tybscnhm/4/

.images {
  display: flex;
  background-color: red;
  overflow: hidden;
    transition: all 1.2s ease;
}
.image-container {
  position: relative;
  display: flex;
}
.image-container:not(:nth-child(1)) {
  position: relative;
  margin-left: -10%;
}
.image-container img {
  max-width: 100%;
}
.image-container:hover {
  z-index: 1000;
}

<div class="images">
  <div class="image-container">
    <img src="http://i.imgur.com/mOSCZCo.jpg">
  </div>
  <div class="image-container">
    <img src="http://i.imgur.com/zFYHM67.jpg">
  </div>
  <div class="image-container">
    <img src="http://i.imgur.com/VMh4FNX.jpg">
  </div>
  <div class="image-container">
    <img src="http://i.imgur.com/XNVJztM.jpg">
  </div>
  <div class="image-container">
    <img src="http://i.imgur.com/quwEgMO.jpg">
  </div>
</div>

2。我快速使用flexbox和jquery进行悬停切换。

悬停的图像不会在其他图像上展开，而是在其他图像挤压时伸展。

目前在容器上需要固定高度，并且需要添加过渡效果。需要大量的工作但是反应灵敏。

<强>拨弄

https://jsfiddle.net/Hastig/trhgfbc8/1/

$('.image-container').hover(
  function() {
    $('.image-container').not(this).toggleClass('squeeze');
    $(this).toggleClass('stretch');
  }, 
  function() {
    $('.image-container').not(this).toggleClass('squeeze');
    $(this).toggleClass('stretch');
  }
);

.images {
  display: flex;
  background-color: red;
  overflow: hidden;
  height: 200px; /* fixed height, needs work */
    transition: all 1.2s ease;
}
.image-container {
  display: flex;
  overflow: hidden;
}
.image-container img {
  display: flex;
  max-width: 100%;
}
.stretch {
  width: 50%;
}
.squeeze {
  width: 25%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="images">
  <div class="image-container">
    <img src="http://i.imgur.com/mOSCZCo.jpg">
  </div>
  <div class="image-container">
    <img src="http://i.imgur.com/zFYHM67.jpg">
  </div>
  <div class="image-container">
    <img src="http://i.imgur.com/VMh4FNX.jpg">
  </div>
</div>

我使用了所选答案中的代码来尝试获得类似的东西，同时响应我可以在我自己的设计中使用。没有什么比这更好了，但他们在这里。

3 这会在保持容器高度的同时响应屏幕宽度。它在狭窄的屏幕宽度上有点挤压，必须与媒体查询一起播放高度。（不适用于chrome，我也假设ie / edge）

https://jsfiddle.net/Hastig/z7zwec1j/3/

4。这是另一个能够处理不同图像尺寸的响应式图像尺寸，虽然有点笨拙，但在高度方面。（不适用于chrome，我也假设ie / edge）

https://jsfiddle.net/Hastig/z7zwec1j/2/

5. 第一张图片需要工作

https://jsfiddle.net/Hastig/tybscnhm/8/

Answer 3

我相信这会解决您的问题http://jsfiddle.net/3j239uvk/

<img src="https://upload.wikimedia.org/wikipedia/commons/6/6f/OrteliusWorldMap.jpeg" width="150" height="100" name="image_name"
onmouseover="image_name.width='200';image_name.height='100';"
onmouseout="image_name.width='100';image_name.height='100';" />

＆＃39; onmouseover＆＃39;显示鼠标悬停时图像的属性，＆＃39; onmouseout＆＃39;显示鼠标悬停时的属性。

在CSS中悬停时水平扩展图像

3 个答案: