эффект наложения - PullRequest
Новая
       22

эффект наложения

0 голосов
/ 18 мая 2019

Мне просто нужно добавить эффект наложения при нажатии на три точки. Он должен отображать белый фон сверху, переход должен быть снизу. Я прикрепил ссылку на кодовый указатель.

Для предварительного просмотра вашей работы ... Используйте эту ссылку codepen .... https://codepen.io/subin_s/pen/NVgLgx

HTML 

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">

<div class="projects">

  <div class="image">
  </div>
  <div class="words">
    <h2>BlogSpire</h2>
    <i class="fas fa-ellipsis-v" id="moreinfo"></i>
    <div class="clearfix"></div>
    <p>Blogging web app created for the Engineering team at WeSpire.</p>
  </div>
</div>

CSS 

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body {
  font-family:'Roboto';
}

.projects {
  position:relative;
  margin:2rem;
  width: 335px;
  height:400px;
  background-color:#fff;
  border-radius:5px;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
}

.image {
  position:absolute;
  width:100%;
  height:240px;
  background-color:skyblue;
}

.words {
  position:absolute;
  top:240px;
  padding:20px 20px 30px;
  color:#333;
}

.words i {
  position:absolute;
  top:27px;
  right:40px;
  cursor:pointer;
}

.words h2 {
  color:#008073;
}

.words p {
 padding:13px 0 0;
}

JS 

document.getElementById('moreinfo').addEventListener('click', projectInfo);

function projectInfo() {

}

1 Ответ

1 голос
/ 19 мая 2019

Вы можете добавить оверлей, добавив элемент, обычно div внутри вашей карты, и установив его положение на абсолютное.Вы можете расположить его с помощью атрибутов top, left, bottom или right.

Чтобы создать анимацию наложения, идущего снизу, вы можете создать простой переход css, изменяя значения атрибута top css.

Я отредактировал ваш код, чтобы создать небольшой пример поверх него.Я надеюсь, что это поможет вам. 

const moreInfoElement = document.getElementById('moreinfo');
const overlay = document.getElementById('overlay');
moreInfoElement.addEventListener('click', projectInfo);
function projectInfo() {
  overlay.classList.add('active-overlay');
  
  setTimeout(() => {
    overlay.classList.remove('active-overlay');
  }, 3000);
}
* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body {
  font-family:'Roboto';
}

.projects {
  position:relative;
  margin:2rem;
  width: 335px;
  height:400px;
  background-color:#fff;
  border-radius:5px;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
  overflow: hidden;
}

.image {
  position:absolute;
  width:100%;
  height:240px;
  background-color:skyblue;
}

.words {
  position:absolute;
  top:240px;
  padding:20px 20px 30px;
  color:#333;
}

.words i {
  position:absolute;
  top:27px;
  right:40px;
  cursor:pointer;
}

.words h2 {
  color:#008073;
}

.words p {
 padding:13px 0 0;
}

.overlay{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 1;
  transition: all .6s;
}

.active-overlay{
  top: 0;
}
<link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet"/>
<div class="projects">
  <div id="overlay" class="overlay">
    Some text
  </div>
  <div class="image">
  </div>
  <div class="words">
    <h2>BlogSpire</h2>
    <i class="fas fa-ellipsis-v" id="moreinfo"></i>
    <div class="clearfix"></div>
    <p>Blogging web app created for the Engineering team at WeSpire.</p>
  </div>
</div>
...