Zobrazení informací o galerii při :hover

content
Emil Miler 4 years ago
parent 870401b3f8
commit 8248adb168

@ -373,30 +373,55 @@ main {
column-gap: 1em; column-gap: 1em;
row-gap: 1em; row-gap: 1em;
img:hover { box-shadow: 0px 1px 9px #00000088 } img { display: block }
a:hover img { box-shadow: 0px 1px 9px #00000088 }
} }
.gallery.index { .gallery.index {
a { a {
position: relative; position: relative;
color: #fff; color: #fff;
} }
.description { .info {
position: absolute; position: absolute;
left: 0; left: 0;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
padding: .7rem; height: 100%;
max-height: 40%;
display: flex;
flex-direction: column;
padding: .7em;
background-color: rgba(46, 52, 64, 0.85); background-color: rgba(46, 52, 64, 0.85);
text-align: left; text-align: left;
font-weight: normal; font-weight: normal;
font-size: .85rem; font-size: .85rem;
transition: all .1s ease-out;
.description {
height: 0;
margin-top: 0.85em;
overflow: hidden;
opacity: 0;
transition: all .1s linear .1s;
}
.date { .date {
margin-top: .5em; align-self: flex-end;
text-align: right; margin-top: auto;
font-size: .9em;
color: #ccc; color: #ccc;
} }
} }
a:hover {
.info {
max-height: 100%;
padding-top: 1.5em;
}
.info .description {
height: auto;
opacity: 1;
}
}
} }
.button { .button {

@ -227,12 +227,13 @@
{% endfor %} {% endfor %}
<img src="{{ resize_image(path=img, width=300, height=200, op="fill") }}" alt="{{ gallery.title }}"> <img src="{{ resize_image(path=img, width=300, height=200, op="fill") }}" alt="{{ gallery.title }}">
<div class="description"> <div class="info">
<div class="title">{{ gallery.title }}</div>
{% if gallery.description %} {% if gallery.description %}
{{ gallery.description }} <div class="description">{{ gallery.description }}</div>
{% else %}
{{ gallery.title }}
{% endif %} {% endif %}
<div class="date">2021-05-02</div> <div class="date">2021-05-02</div>
</div> </div>
</a> </a>

Loading…
Cancel
Save