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

Question

我想为我正在和一些朋友做的网站项目构建一个主页，其中整个页面基本上是三个图像，一个挨着另一个，如下所示：

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

每个“正方形”都有一个代表图像的数字。压缩的“正方形”就像非常小的开口，可通过将鼠标悬停在它们上来切换到另一个图像。

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

我找到了这个 (http://jsfiddle.net/harmeister/a4n6e/18/)，这正是我正在寻找的东西，但我还不够好，无法适应我的需要。理想情况下，展开后的图像上会出现一些文本，但我想我知道该怎么做。

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

Answer 1

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

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

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';" />

“onmouseover”在鼠标悬停时显示图像的属性，“onmouseout”在鼠标未悬停时显示属性。