嗨,我在 codepen 上找到了一个由 Olaman 创建的图片库,我正在尝试将其添加到我的项目中。图库显示一个带有一些垂直列表的面板,当您移动鼠标时,将显示图像,将其余列表分隔到两侧。好吧,正如我所说,他们有 5 张图片,我想再添加 2 或 3 张图片。但正如您将在示例中看到的那样,添加它们时,图像从div
. 有五个效果很好,当我们在每个列表中移动鼠标时,图像会一张一张地显示在同一个列表中div
,将其余部分毫无问题地分开。尽管我想了很多,但我无法得到它,我试图减小初始列表的大小,但没有成功。我不知道还能做什么。我怎样才能在不破坏效果的情况下插入更多图像并保留所有图像div
?我展示了这个例子。谢谢。
编辑:应同事的要求, 将来源放在我找到的地方。
html, body {
margin: 0;
padding:0;
background: #ccc;
}
ul.acordeon * {
font-family: Arial, sans-serif;
-webkit-transition: all .6s ease-in-out;
-moz-transition: all .6s ease-in-out;
transition: all .6s ease-in-out;
}
ul.acordeon {
width: 100%;
overflow: hidden;
padding: 0;
background: #04850A;
text-align: center;
list-style: none;
font-size: 0;
box-shadow: 0 0 10px #333;
}
ul.acordeon li {
position: relative;
display: inline-block;
*display: inline; zoom: 1; /* IE7 */
width: 10%;
height:0;
padding-bottom: 40%; /* Ratio aspecto imagen = (height*X)/width */
background: #eee;
text-align: center;
box-shadow: -2px 0px 8px #999;
}
/* Títulos pestañas */
ul.acordeon li h4 {
position: relative;
top: 5%;
z-index: 1;
margin: 0;
font-size: 18px;
text-align: left;
text-transform: uppercase;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: 10% 120%;
-moz-transform-origin: 10% 120%;
transform-origin: 10% 120%;
white-space: nowrap;
}
/* Contenido inicialmente oculto */
ul.acordeon li a, ul.acordeon li img {
position: absolute;
bottom: 0;
right: 0;
display: inline-block;
*display: inline; zoom: 1; /* IE7 */
width: 0;
padding:0;
background: #333;
}
/* Hover: Desplegamos elemento aumentando su ancho */
ul.acordeon li:hover {
width: 60%; /* 100 - 10*(nºelem-1) // X=60 para ratio imagen */
background: #333;
}
/* Hover: Hacemos que el título recupere la horizontal y le ponemos un fondo */
ul.acordeon li:hover h4 {
padding-left: 10px;
background: #04850A;
color: #eee;
-webkit-transform: none;
-moz-transform: none;
transform: none;
}
/* Hover: Expandimos el contenido */
ul.acordeon li:hover a, ul.acordeon li:hover a img {
width: 100%;
}
/* Ajustes para resoluciones pequeñas */
@media(max-width:600px) {
ul.acordeon li h4 {
font-size: 12px;
letter-spacing: 1px;
}
}
/* VARIACIONES PARA CONSEGUIR QUE EL MENU OCUPE INICIALMENTE TODO EL ANCHO
ul.acordeon li {
width: 20%;
}
ul.acordeon:hover li {
width: 10%;
}
ul.acordeon li:hover {
width: 60%;
}
*/
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CSS responsive accordion gallery/menu</title>
<link href="css/style-desbroces.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<ul class="acordeon">
<li>
<h4>Yecla</h4>
<a href="#">
<img src="https://1.bp.blogspot.com/-na8syCqA5QM/U2Y0MkeZeFI/AAAAAAAAPyA/5C7WeCVpcyE/s900/yecla.jpg"/>
</a>
</li>
<li>
<h4>Ricote</h4>
<a href="#">
<img src="https://3.bp.blogspot.com/-0VLtdXRmROw/U2Y0MBkDjKI/AAAAAAAAPx8/2WHDkLKpo3g/s900/ricote.jpg"/>
</a>
</li>
<li>
<h4>Bullas</h4>
<a href="#">
<img src="https://4.bp.blogspot.com/-dx4GDtQCuCY/U2Y0LT8IlRI/AAAAAAAAPxo/4XW_d21QrMk/s900/bullas.jpg"/>
</a>
</li>
<li>
<h4>Jumilla</h4>
<a href="#">
<img src="https://4.bp.blogspot.com/-8vVOgYUvpRA/U2Y0LTWXwFI/AAAAAAAAPxs/HPnmp59MYtk/s900/jumilla.jpg"/>
</a>
</li>
<li>
<h4>Jumilla</h4>
<a href="#">
<img src="https://4.bp.blogspot.com/-8vVOgYUvpRA/U2Y0LTWXwFI/AAAAAAAAPxs/HPnmp59MYtk/s900/jumilla.jpg"/>
</a>
</li>
<li>
<h4>Abanilla</h4>
<a href="#">
<img src="https://4.bp.blogspot.com/-yyHs3e39Tsg/U2Y0LHHoRmI/AAAAAAAAPxk/TnqknfWjR0s/s900/abanilla.jpg"/>
</a>
</li>
<li>
<h4>Abanilla</h4>
<a href="#">
<img src="https://4.bp.blogspot.com/-yyHs3e39Tsg/U2Y0LHHoRmI/AAAAAAAAPxk/TnqknfWjR0s/s900/abanilla.jpg"/>
</a>
</li>
</ul>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
在选择器中将 60% 减少 20%(每张图像 10%):
为了使选项卡上的图像填充宽度,像以前一样,我们需要修改一些东西。
ul.acordeon li img
object-fit: cover
opacity
为0
。右下角,则必须添加
transform-origin: 100% 100%;
和transform: scale(0)
。例子:还要寻找控制悬停效果的多个类的选择器:
ul.acordeon li:hover a, ul.acordeon li:hover a img
并剪切图像中的一个:ul.acordeon li:hover a img
。将之前复制的选择器粘贴到一边并添加一个
opacity: 1;
transform: scale(1) ;
我还建议
overflow: hidden;
在标签容器中添加一个:ul.acordeon li
例子:
用新工具替代
此外,我提出了这种结构,它做同样的事情,但使用 flexbox 和 css 变量,以更好地控制手风琴。