Hi I found an image gallery on codepen, created by Olaman and I'm trying to add it to my project. The gallery shows a panel with some vertical lists through which when you move the mouse, the images are displayed, separating the rest of the lists to the sides. Well, as I said, they have 5 images, and I want to add 2 or 3 more images. But as you will see in the example, when adding them, the images come out from the bottom of the div
. With five it works great, as we move the mouse through each list, the images are displayed one by one in the samediv
, separating the rest without problem. As much as I thought about it, I am not able to get it, I tried to reduce the size of the initial lists, without success. I do not know what else to do. How could I insert more images without breaking the effect and all remaining in it div
? I show the example. Thanks.
EDIT: To put the source where I found it, at the request of a colleague.
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>
Decrease 60% by 20% (10% for each image) in the selector:
To make the image on the tabs fill the width, as before, we need to modify a few things.
ul.acordeon li img
object-fit: cover
opacity
to0
.right corner, you must add
transform-origin: 100% 100%;
andtransform: scale(0)
. Example:Also look for the selector of multiple classes that control the hover effect :
ul.acordeon li:hover a, ul.acordeon li:hover a img
and cut the one in the image:ul.acordeon li:hover a img
.Paste the selector, copied earlier, aside and add a
opacity: 1;
transform: scale(1) ;
I also recommend adding a
overflow: hidden;
to the tabs container:ul.acordeon li
Example:
Alternative with new tools
In addition, I propose this structure, which does the same thing but with flexbox and css variables, for greater control over the accordion.