3
У меня есть шесть ящиков с надписью. Я хочу, чтобы заголовок отображался на событии наведения мыши. При этом я столкнулся с двумя проблемами.относительное позиционирование с эффектом перехода
Если я использую положение: абсолютное, подписи к рисункам потеряли бы выравнивание по центру.
Если я использую позицию: относительная, подписи к рисункам были бы выровнены по центру, но они не могли быть анимированы.
Так что в целом я хочу выровнять подписи в центре, и он должен анимироваться снизу вверх.
я попытался следующие вещи:
Left: 50%;
Right: 50%;
margin-right: 50%;
margin-left 50%;
Но это будет вызывать центр выравнивания страницы, но я хочу Подписи быть выровнены галоп коробки не страницы.
Вот пример
a:hover img{
\t -webkit-transform: translateY(-20px);
\t -moz-transform: translateY(-20px);
\t -ms-transform: translateY(-20px);
\t transform: translateY(-20px);
}
a:hover .caption{
\t display: inline;
\t opacity: 1;
\t -webkit-transform: translateY(-10px);
\t -moz-transform: translateY(-10px);
\t -ms-transform: translateY(-10px);
\t transform: translateY(-10px);
\t -webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
\t -moz-transition: -moz-transform 0.4s, opacity 0.1s;
\t transition: transform 0.4s, opacity 0.1s;
}
figure{
\t overflow: hidden;
}
figure img{
\t height: 105px;
\t width: 120px;
\t padding: 20px 0px 0px 0px;
\t display: flex;
\t -webkit-transition: -webkit-transform 0.4s;
\t -moz-transition: -moz-transform 0.4s;
\t transition: transform 0.4s;
}
.caption{
\t display: none;
\t font-size: 1.4em;
\t color: #fff;
\t position: relative;
\t -webkit-transform: translateY(100%);
\t -moz-transform: translateY(100%);
\t -ms-transform: translateY(100%);
\t transform: translateY(100%);
\t -webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
\t -moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
\t transition: transform 0.4s, opacity 0.1s 0.3s;
}
a{
\t text-decoration:none;
\t outline:none;
\t color: $fff;
}
.btn-row{
\t margin: 30px 0px 0px 0px;
\t display: inline-flex;
}
.box-btn{
\t height: 150px;
\t width: 150px;
\t border-radius: 10px;
\t border: 1px solid #bdc1c4;
\t background-color: $white;
\t margin: 0px 10px 0px 10px;
\t outline: none;
}<center><br>
<div class="btn-row">
\t <a href="domainSearch.html" class="link">
\t \t <figure class="box-btn">
\t \t \t <img src="style/img/university.jpg" class="img">
\t \t \t <figcaption class="caption">xyz</figcaption>
\t \t </figure>
\t </a>
\t <a href="domainSearch.html" class="link">
\t \t <figure class="box-btn">
\t \t <img src="style/img/university.jpg" class="img">
\t \t \t <figcaption class="caption">xyz</figcaption>
\t \t </figure>
\t </a>
\t <a href="domainSearch.html" class="link">
\t \t <figure class="box-btn">
\t \t \t <img src="style/img/university.jpg" class="img">
\t \t \t <figcaption class="caption">abcdefghijkl </figcaption>
\t \t </figure>
\t </a>
</div>
<div class="btn-row">
\t <a href="domainSearch.html" class="link">
\t \t <figure class="box-btn">
\t \t \t <img src="style/img/university.jpg" class="img">
\t \t \t <figcaption class="caption">short text</figcaption>
\t \t </figure>
\t </a>
<a href="domainSearch.html" class="link">
\t \t <figure class="box-btn">
\t \t \t <img src="style/img/university.jpg" class="img">
\t \t \t <figcaption class="caption">long text coming here
</figcaption>
\t \t </figure>
\t \t </a>
\t \t <a href="domainSearch.html" class="link">
\t \t \t <figure class="box-btn">
\t \t \t \t <img src="style/img/university.jpg" class="img">
\t \t \t \t <figcaption class="caption">defghi</figcaption>
\t \t \t </figure>
\t \t </a>
\t </div>
</center>
Я предлагаю посетить этот сайт http://materializecss.com/cards.html и проверьте css для раскрытия карты. – Tasos