custom_gallery/app/assets/stylesheets/widget_custom_gallery.css

70 lines
1.1 KiB
CSS

.widget_custom_gallery {
margin-bottom: 20px;
}
.widget_custom_gallery:after {
display: table;
width: 100%;
content: '';
}
.widget_custom_gallery ul {
list-style: none;
margin: 0;
padding: 0;
}
.widget_custom_gallery li a {
display: block;
}
.widget_custom_gallery li a img {
height: auto;
display: block;
}
/* widget 1 */
.w1 ul {
margin: 0 -1%;
}
.w1 li {
float: left;
margin: 1%;
}
.w1.c2 li { width: 48%; }
.w1.c3 li { width: 31.3333%; }
.w1.c4 li { width: 23%; }
.w1.c5 li { width: 18%; }
.w1.c6 li { width: 14.6666%; }
.w1 li a {
-webkit-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
.w1 li a:hover {
opacity: 0.8;
position: relative;
}
.w1 li a img {
width: 100%;
}
/* widget 2 */
.w2 li {
width: 100%;
}
.w2 li a img {
width: 100%;
height: auto;
}
.w2 li a {
position: relative;
overflow: hidden;
color: #fff;
text-transform: capitalize;
}
.w2 li a .desc {
position: absolute;
bottom: -60px;
opacity: 0;
display: block;
width: 100%;
padding: 5%;
background-color: rgba(8, 166, 255, 0.8);
}