Привет, я нашел галерею изображений на 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, для большего контроля над аккордеоном.