0

Как в after выровнять content? или есть более разумные способы, нужен ваш совет

.thumbs-row a {
  position: relative;
  display: block;
  background-color: pink;
  color: #fff;
  font-size: 72px;
  text-align: center;
  font-weight: 200;
}
.thumbs-row a:after {
  position: absolute;
  content: 'Купить';
  font-size: 0.6em;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #4b555d;
  background-color: rgba(75, 85, 93, 0.8);
  line-height: 1;
  opacity: 0;
  transition: all 0.3s ease-in-out;
}
.thumbs-row a:hover:after {
  opacity: 1;
  line-height: 3.7;
}
<div class="row thumbs-row">
  <div class="col-xs-6 col-sm-6 col-md-3 modern" data-category="0">
    <a href="#!">
      <img src="http://vart.prostoprint.com/static/products/full-dbc076436e6e25086104826a1aa4093c.png" alt="" class="img-responsive">
     </a>
  </div>
</div>            

1 ответ 1

1

Как вариант - можно использовать и :after, и :before.

.thumbs-row a {
  position: relative;
  display: block;
  background-color: pink;
  color: #fff;
  font-size: 72px;
  text-align: center;
  font-weight: 200;
}

.thumbs-row a:before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #4b555d;
  background-color: rgba(75, 85, 93, 0.8);
  opacity: 0;
  transition: all 0.3s ease-in-out;
}

.thumbs-row a:after {
  position: absolute;
  content: 'Купить';
  font-size: 0.6em;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: all 0.3s ease-in-out;
}

.thumbs-row a:hover:before {
  opacity: 1;
}

.thumbs-row a:hover:after {
  opacity: 1;
  top: 50%;
  transform: translateY(-50%);
}
<div class="row thumbs-row">
  <div class="col-xs-6 col-sm-6 col-md-3 modern" data-category="0">
    <a href="#!">
      <img src="http://vart.prostoprint.com/static/products/full-dbc076436e6e25086104826a1aa4093c.png" alt="" class="img-responsive">
     </a>
  </div>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.