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

Question

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

3

我希望为我和一些朋友正在进行的网站项目建立一个主页，该主页基本上由三个图像并排组成，如下所示：

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

每个“方块”都有一个代表图像的数字。挤压的“方块”就像非常小的开口，可以通过悬停在它们上面来切换到另一张图片。

现在我的想法是，当用户悬停在某个图像上时，每个图像会扩展到剩余的两个图像上。

我找到了这个（http://jsfiddle.net/harmeister/a4n6e/18/），这就是我想要的，但我不太会将其适应到我的需求上。理想情况下，扩展的图像上会出现一些文本，但我认为我知道如何做到这一点。

我不确定这是否可以使用纯CSS实现，但这是我更喜欢的方式。

- Iocust

3个回答

3

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

fiddle

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编写了一个快速的悬停切换效果。

悬停的图像不会覆盖其他图像，而是被拉伸，其他图像则被压缩。

目前需要在容器上设置固定高度，并添加过渡效果。需要大量工作，但它是响应式的。

fiddle

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/

- Hastig Zusammenstellen

我不能接受两个答案，但这个也对我有用。另一个答案似乎更合适，因为它考虑了我必须放在图像上的文本。仍然非常感谢你。 - Iocust

1

那个回答是一些惊人的代码，我无法与之竞争。谢谢你的回复 :) - Hastig Zusammenstellen

1

我相信这将解决你的问题 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';" />

“onmouseover”表示当鼠标悬停在图像上时显示图像的属性，“onmouseout”则表示当鼠标没有悬停在图像上时显示属性。”

- Krypton

这是我第一次尝试的方法，但我真的不喜欢整个拉伸的效果，我只想让彼此隐藏的图像扩展到它们的全尺寸。如果在其他情况下需要，这仍然很好用。谢谢。 - Iocust

我确实想知道为什么有人想要“拉伸”一张图片，但是每个人都有自己的想法。我看到有人向你展示了如何隐藏图片，这看起来非常酷，并且更有意义:P 谢谢回复 :) - Krypton

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- GabMic · Accepted Answer

编辑我相信你正在寻找这个。

/*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;
}

<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>