.da-gallery * {box-sizing:border-box;}
.da-gallery {
width: 100%;
background: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,.5);
height: 200px;
overflow: hidden;
position: relative;
}
.da-gallery.expanded {
height:auto;
overflow: visible;
}
.da-gallery.expanded .show-more {
display:none;
}
.da-gallery > div {
position: relative;
float: left;
padding: 5px;
width:33.33%;
}
.da-gallery > div > img {
display: block;
width: 100%;
transition: .1s transform;
transform: translateZ(0);
}
.da-gallery > div:hover {
z-index:1;
}
.da-gallery > div:hover > img {
transform: scale(1.5,1.5);
transition: .3s transform;
z-index:100;
}
.cf:before, .cf:after {
display: table;
content: “”;
line-height: 0;
}
.cf:after {
clear: both;
}
.show-more {
display:block;
position: absolute;
z-index: 100;
bottom: 0;
background: #f0ad00;
color: #fff;
width: 100%;
text-align: center;
font-family: helvetica;
padding:12px 8px;
text-decoration: none;
transition: all .1s ease;
font-weight:bold;
}
.show-more:hover {
background:#F08F00;
}
.btn_asb {cursor: pointer;
font-family: helvetica;
transition: all .1s ease;
background-color: #f0ad00;
background-image: none;
color: #fff;
font-size:12px;
font-weight: bold;
line-height: 1;
padding: 12px 8px;
text-decoration: none;
display: inline-block;
text-align: center;}
table {border-spacing: 0.5rem;}
th, text-decoration: {padding: 0.25rem;
text-align: left;
}
@media (max-width: 600px) {
.da-gallery > div {
width: 100%;
}
}
function showAll() {
document.getElementById(‘da-gallery’).classList.add(“expanded”)
}