Как преобразовать этот элемент в код? - PullRequest
Новая
       5

Как преобразовать этот элемент в код?

0 голосов
/ 10 июня 2018

это мой код CSS и HTML:

Моя цель - создать поле, указанное на изображении 

.stone-item{
    width: 330px;
    transition: all .2s ease-in-out;
    -webkit-transition:  all .2s ease-in-out;
    -moz-transition:  all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    position: relative;
    margin: 0;
}
.stone-item img{
    width: 330px;
    height: 220px;
}
.stone-item .stone-content{
    transition: all .2s ease-in-out;
    -webkit-transition:  all .2s ease-in-out;
    -moz-transition:  all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    position: absolute;
    bottom: -50%;
    left: 0;
    background: aqua;
}
<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="css.css">
</head>
    <body>

<div class="stone-item">
    <a href="#"><img src="" alt=""></a>
    <div class="stone-content">
        <h4> </h4>
    </div>
</div>
</body>

</html>

Откуда проблема?Почему не работает ?????

Мой желаемый вывод:

до наведения

после: после наведения мыши

1 Ответ

0 голосов
/ 11 июня 2018

Вот ваш код.

HTML 

<!doctype html>
<html>

  <head>
    <link rel="stylesheet" href="css.css">
  </head>

  <body>

    <div class="stone-item">
      <a href="#"><img src="https://i.stack.imgur.com/SjIvg.png" alt=""></a>
      <div class="stone-content">
        <h4>adsfasdf</h4>
        <p>
          Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
        </p>
      </div>
    </div>
  </body>

</html>

CSS 

.stone-item {
  width: 330px;
  transition: all .2s ease-in-out;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  position: relative;
  margin: 0;
  overflow: hidden;
}

.stone-item img {
  width: 330px;
  height: 220px;
}

.stone-item .stone-content {
  transition: all .2s ease-in-out;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  position: absolute;
  bottom: calc(110px - 100%);
  left: 0;
  background: rgba(0, 255, 255, 0.6);
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.stone-item .stone-content h4 {
  margin: 0;
}

.stone-item:hover .stone-content {
  bottom: 0;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...