3

При наведении на фото - появляются 2 наклонных блока. Не могу сообразить как выровнять текст по центру горизонтально вертикально (на пересечении блоков) и сделать его прямым (он наклонный из-за свойства transform: skew ). Лучше сделать через псевдоэлементы (т.к делаю галерею, нужно меньшее количество элементов)

@charset "UTF-8";
.gallery__item {
  position: relative;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/8/8f/Bachalpsee_reflection.jpg/300px-Bachalpsee_reflection.jpg");
  height: 271px;
  width: 33.3%;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}
.gallery__item:hover:before {
  position: absolute;
  top: -8%;
  right: -11%;
  content: "";
  width: 80%;
  height: 65%;
  border-radius: 30px;
  transform: skew(-15deg);
  background: rgba(0, 0, 255, 0.7);
}
.gallery__item:hover:after {
  position: absolute;
  bottom: -8%;
  left: -11%;
  color: #fff;
  content: "Увеличить";
  text-align: right;
  width: 80%;
  height: 65%;
  border-radius: 30px;
  transform: skew(-15deg);
  background: rgba(0, 0, 255, 0.7);
}
<div class="gallery__item"></div>

4
  • Возможный дубликат этого вопроса ru.stackoverflow.com/questions/744358/transform-skew-css 16 авг 2018 в 14:22
  • нет, мне нужно только через псевдоэлементы. Наверное, не за чем вставлять текст "увеличить" после каждого блока с картинкой в будущей галерее
    – stiv
    16 авг 2018 в 14:29
  • :before - использовать картинку (background), а в :after текст. Всё.
    – De.Minov
    16 авг 2018 в 15:59
  • Ну да можно и так, а если в дальнейшем понадобится анимировать каждый блок. Нужно более гибкое решение
    – stiv
    17 авг 2018 в 1:20

2 ответа 2

1

@charset "UTF-8";
.gallery__item {
    position: relative;
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/8/8f/Bachalpsee_reflection.jpg/300px-Bachalpsee_reflection.jpg");
    height: 271px;
    width: 33.3%;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
}

.gallery__item:hover:before {
    position: absolute;
    top: -8%;
    right: -11%;
    content: "";
    width: 80%;
    height: 65%;
    border-radius: 30px;
    transform: skew(-15deg);
    background: rgba(0, 0, 255, 0.7);
}

.gallery__item:hover:after {
    position: absolute;
    bottom: -8%;
    left: -11%;
    content: "";
    text-align: right;
    width: 80%;
    height: 65%;
    border-radius: 30px;
    transform: skew(-15deg);
    background: rgba(0, 0, 255, 0.7);
}

.gallery__item:hover div:after {
    position: absolute;
    display: flex;
    content: "Увеличить";
    color: #fff;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    z-index: 1;

}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Online store</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Online store</title>
    <link rel="stylesheet" href="css/main.css">
</head>

<body>
    <div class="gallery__item">
        <div></div>
    </div>
</body>

</html>

По другому никак

2
  • 1
    Хитро :) а если js вставлять? или это совсем костыль)
    – stiv
    16 авг 2018 в 15:08
  • 1
    Когда писал это "По другому никак" тожe про js подумал да в тэгах его нет да и js я не знаю:( ;)
    – midia
    16 авг 2018 в 15:10
0

@charset "UTF-8";
.gallery__item {
  position: relative;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/8/8f/Bachalpsee_reflection.jpg/300px-Bachalpsee_reflection.jpg");
  height: 271px;
  width: 33.3%;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}

.gallery__item:hover:after {
  position: absolute;
  bottom: 0;
  left: 0;
  color: #fff;
  content: "Увеличить";
  text-align: center;
  width: 100%;
  height: 55%;
  background: rgba(0, 0, 0, 0);
}
<div class="gallery__item"></div>

6
  • поправил вопрос, может быть не хватало деталей
    – stiv
    16 авг 2018 в 14:52
  • Пересечение блоков - обязательно? Можно обойтись одним псевдоклассом
    – DNS
    16 авг 2018 в 14:58
  • Обязательно, в этом-то вся и сложность. Просто с текстом гораздо легче
    – stiv
    16 авг 2018 в 15:00
  • Тогда надо понимать задачу глубже, чем описано в вопросе. Пока не понимаю, зачем такая сложность, если можно проще...
    – DNS
    16 авг 2018 в 15:02
  • Согласен. Верстаю по макету, возможно дизайнер нарисовал не обоснованно сложный элемент
    – stiv
    16 авг 2018 в 15:07

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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