Как положить оверлей, чтобы согнуть предмет в гибком контейнере - PullRequest
Новая
       5

Как положить оверлей, чтобы согнуть предмет в гибком контейнере

0 голосов
/ 24 сентября 2018

Это мой код.Я хочу поместить наложение серого цвета поверх содержимого каждого flexItem.Слой также должен быть поверх изображения.Я не могу найти решение, у кого-нибудь есть идея?

Я пытаюсь с относительной позицией на flexCont и абсолютной наложением flexItem, но ничего не делать.

У меня есть функция в js, котораяпримените оверлейный класс при наведении курсора и удалите его, если вы не наведите курсор мыши больше 

$('.flexItem').hover(
        function() {
            $(this).addClass( 'overlay' );
            console.log('hover')
          }, function() {
          $(this).removeClass( 'overlay' ); 
            console.log('no hover')
          }
    );
.flexCont{
    display: flex;
    display: -ms-flex;
	display: -webkit-flex;
    flex-direction: row;
}

.flexContO{
    display: flex;
    display: -ms-flex;
	display: -webkit-flex;
    flex-direction: row;
}

.flexContO>div{
    width:50%;
}

.flexCont .flexItem{
    flex: 1 1 25%;
}

.flexItem{
    display: flex;
    flex-direction: column;
}
.overlay{
    background-color: rgba(0,0,0,0.5); /*dim the background*/
    position: relative;
z-index:999!important;
  }

.flexItemV{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.flexItemO{
    display: flex;
    flex-direction: row;  
}
.flexItemO>div{
    width:50%;
}

.flexItem1{
   height:375px;
   justify-content: center;
   align-items: center;
   display: flex;
   flex-direction: column;
   text-align:center;
   padding:20px;
}

.flexItem2>img{
    width: 100%;z-index:99!important;
}

.flexItemV1{

}
.flexItemV2{
    
}

.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flexCont">
    <div class="flexItem">
       <div class="flexItem1">
          <p>Place</p>
          <h3>u &amp; d 4</h3>
          <a href="http//link/u-d/">sometext bla bla </a><br><a href="http//link/u-d/"><i class="x-icon x-icon-arrow-right" data-x-icon="" aria-hidden="true"></i></a>
       </div>
       <div class="flexItem2"><img src="https://meme.xyz/uploads/posts/t/l-1229-the-two-states-of-every-programmer.jpg"></div>
    </div>
    <div class="flexItem">
       <div class="flexItem2"><img src="https://meme.xyz/uploads/posts/t/l-1229-the-two-states-of-every-programmer.jpg"></div>
       <div class="flexItem1">
          <p>Place</p>
          <h3>d &amp; u 3</h3>
          <a href="http//link/d-u/">sometext bla bla </a><br><a href="http//link/d-u/"><i class="x-icon x-icon-arrow-right" data-x-icon="" aria-hidden="true"></i></a>
       </div>
    </div>
    <div class="flexItem">
       <div class="flexItem1">
          <p>Place</p>
          <h3>d &amp; u 2</h3>
          <a href="http//link/matrimonio-test2/">sometext bla bla </a><br><a href="http//link/matrimonio-test2/"><i class="x-icon x-icon-arrow-right" data-x-icon="" aria-hidden="true"></i></a>
       </div>
       <div class="flexItem2"><img src="https://meme.xyz/uploads/posts/t/l-1229-the-two-states-of-every-programmer.jpg"></div>
    </div>
    <div class="flexItem">
       <div class="flexItem2"><img src="https://meme.xyz/uploads/posts/t/l-1229-the-two-states-of-every-programmer.jpg"></div>
       <div class="flexItem1">
          <p>Place</p>
          <h3>u &amp; d 1</h3>
          <a href="http//link/matrimonio-test/">sometext bla bla </a><br><a href="http//link/matrimonio-test/"><i class="x-icon x-icon-arrow-right" data-x-icon="" aria-hidden="true"></i></a>
       </div>
    </div>
 </div>

Ответы [ 5 ]

0 голосов
/ 24 сентября 2018

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

$(".flexItem").mouseover(function(){
    $(".overlay-items").css("height", $(".flexItem").outerHeight());
  });
.flexCont{
    display: flex;
    display: -ms-flex;
  display: -webkit-flex;
    flex-direction: row;
}

.flexContO{
    display: flex;
    display: -ms-flex;
  display: -webkit-flex;
    flex-direction: row;
}

.flexContO>div{
    width:50%;
}

.flexCont .flexItem{
    flex: 1 1 25%;
}

.flexItem{
    display: flex;
    flex-direction: column;
    position: relative;
}
.overlay-items{
    background-color: rgba(0,0,0,0.5); /*dim the background*/
    position: relative;
    z-index:999!important;
    display: none;
    width: 100%;
    position: absolute;
  }

.flexItemV{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.flexItemO{
    display: flex;
    flex-direction: row;  
}
.flexItemO>div{
    width:50%;
}

.flexItem1{
   height:375px;
   justify-content: center;
   align-items: center;
   display: flex;
   flex-direction: column;
   text-align:center;
   padding:20px;
   z-index: 9999999;
}

.flexItem2>img{
    width: 100%;z-index:99!important;
}
.flexItem:hover > .overlay-items {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flexCont">
    <div class="flexItem">
    <div class="overlay-items"></div>
       <div class="flexItem1">
          <p>Place</p>
          <h3>u &amp; d 4</h3>
          <a href="http//link/u-d/">sometext bla bla </a><br><a href="http//link/u-d/"><i class="x-icon x-icon-arrow-right" data-x-icon="" aria-hidden="true"></i></a>
       </div>
       <div class="flexItem2"><img src="https://meme.xyz/uploads/posts/t/l-1229-the-two-states-of-every-programmer.jpg"></div>
    </div>
    <div class="flexItem">
    <div class="overlay-items"></div>
       <div class="flexItem2"><img src="https://meme.xyz/uploads/posts/t/l-1229-the-two-states-of-every-programmer.jpg"></div>
       <div class="flexItem1">
          <p>Place</p>
          <h3>d &amp; u 3</h3>
          <a href="http//link/d-u/">sometext bla bla </a><br><a href="http//link/d-u/"><i class="x-icon x-icon-arrow-right" data-x-icon="" aria-hidden="true"></i></a>
       </div>
    </div>
    <div class="flexItem">
    <div class="overlay-items"></div>
       <div class="flexItem1">
          <p>Place</p>
          <h3>d &amp; u 2</h3>
          <a href="http//link/matrimonio-test2/">sometext bla bla </a><br><a href="http//link/matrimonio-test2/"><i class="x-icon x-icon-arrow-right" data-x-icon="" aria-hidden="true"></i></a>
       </div>
       <div class="flexItem2"><img src="https://meme.xyz/uploads/posts/t/l-1229-the-two-states-of-every-programmer.jpg"></div>
    </div>
    <div class="flexItem">
    <div class="overlay-items"></div>
       <div class="flexItem2"><img src="https://meme.xyz/uploads/posts/t/l-1229-the-two-states-of-every-programmer.jpg"></div>
       <div class="flexItem1">
          <p>Place</p>
          <h3>u &amp; d 1</h3>
          <a href="http//link/matrimonio-test/">sometext bla bla </a><br><a href="http//link/matrimonio-test/"><i class="x-icon x-icon-arrow-right" data-x-icon="" aria-hidden="true"></i></a>
       </div>
    </div>
 </div>
0 голосов
/ 24 сентября 2018

Вам необходимо определить оверлей как отдельный элемент внутри .flexItem

$('.flexItem').hover(
  function() {
    $(this).find('.overlay').show();
  },
  function() {
    $(this).find('.overlay').hide();
  }
);
.flexCont {
  display: flex;
  display: -ms-flex;
  display: -webkit-flex;
  flex-direction: row;
}

.flexContO {
  display: flex;
  display: -ms-flex;
  display: -webkit-flex;
  flex-direction: row;
}

.flexContO>div {
  width: 50%;
}

.flexCont .flexItem {
  flex: 1 1 25%;
}

.flexItem {
  display: flex;
  flex-direction: column;
  position: relative; /* Added */
}

.overlay {
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute; /* Changed from relative */
  top: 0; /* Added */
  left: 0; /* Added */
  width: 100%; /* Added */
  height: 100%; /* Added */
  display: none; /* Added */
}

.flexItemV {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.flexItemO {
  display: flex;
  flex-direction: row;
}

.flexItemO>div {
  width: 50%;
}

.flexItem1 {
  height: 375px;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 20px;
}

.flexItem2>img {
  width: 100%;
}

.flexItemV1 {}

.flexItemV2 {}

.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flexCont">
  <div class="flexItem">
    <div class="flexItem1">
      <p>Place</p>
      <h3>u &amp; d 4</h3>
      <a href="http//link/u-d/">sometext bla bla </a><br><a href="http//link/u-d/"><i class="x-icon x-icon-arrow-right" data-x-icon="" aria-hidden="true"></i></a>
    </div>
    <div class="flexItem2"><img src="https://meme.xyz/uploads/posts/t/l-1229-the-two-states-of-every-programmer.jpg"></div>
    <div class="overlay"></div>
  </div>
  <div class="flexItem">
    <div class="flexItem2"><img src="https://meme.xyz/uploads/posts/t/l-1229-the-two-states-of-every-programmer.jpg"></div>
    <div class="flexItem1">
      <p>Place</p>
      <h3>d &amp; u 3</h3>
      <a href="http//link/d-u/">sometext bla bla </a><br><a href="http//link/d-u/"><i class="x-icon x-icon-arrow-right" data-x-icon="" aria-hidden="true"></i></a>
    </div>
    <div class="overlay"></div>
  </div>
  <div class="flexItem">
    <div class="flexItem1">
      <p>Place</p>
      <h3>d &amp; u 2</h3>
      <a href="http//link/matrimonio-test2/">sometext bla bla </a><br><a href="http//link/matrimonio-test2/"><i class="x-icon x-icon-arrow-right" data-x-icon="" aria-hidden="true"></i></a>
    </div>
    <div class="flexItem2"><img src="https://meme.xyz/uploads/posts/t/l-1229-the-two-states-of-every-programmer.jpg"></div>
    <div class="overlay"></div>
  </div>
  <div class="flexItem">
    <div class="flexItem2"><img src="https://meme.xyz/uploads/posts/t/l-1229-the-two-states-of-every-programmer.jpg"></div>
    <div class="flexItem1">
      <p>Place</p>
      <h3>u &amp; d 1</h3>
      <a href="http//link/matrimonio-test/">sometext bla bla </a><br><a href="http//link/matrimonio-test/"><i class="x-icon x-icon-arrow-right" data-x-icon="" aria-hidden="true"></i></a>
    </div>
    <div class="overlay"></div>
  </div>
</div>
0 голосов
/ 24 сентября 2018

Вы можете использовать ниже обновленный код: 

$('.flexItem').hover(
  function() {
    $(this).addClass( 'overlay' );
    $(this).find('img').css('opacity', '0.6');
    //console.log('hover')
  }, function() {
    $(this).removeClass( 'overlay' ); 
    $(this).find('img').css('opacity', '1');
    //console.log('no hover')
  }
);
.flexCont{
    display: flex;
    display: -ms-flex;
	  display: -webkit-flex;
    flex-direction: row;
}

.flexContO{
    display: flex;
    display: -ms-flex;
	  display: -webkit-flex;
    flex-direction: row;
}

.flexContO>div{
    width:50%;
}

.flexCont .flexItem{
    flex: 1 1 25%;
}

.flexItem{
    display: flex;
    flex-direction: column;
}
.overlay{
    background-color: rgba(0,0,0,0.5); /*dim the background*/
    position: relative;
    z-index:999!important;
}

.flexItemV{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.flexItemO{
    display: flex;
    flex-direction: row;  
}
.flexItemO>div{
    width:50%;
}

.flexItem1{
   height:375px;
   justify-content: center;
   align-items: center;
   display: flex;
   flex-direction: column;
   text-align:center;
   padding:20px;
}

.flexItem2>img{
    width: 100%;
    z-index:99!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flexCont">
    <div class="flexItem">
       <div class="flexItem1">
          <p>Place</p>
          <h3>u &amp; d 4</h3>
          <a href="http//link/u-d/">sometext bla bla </a><br><a href="http//link/u-d/"><i class="x-icon x-icon-arrow-right" data-x-icon="" aria-hidden="true"></i></a>
       </div>
       <div class="flexItem2"><img src="https://meme.xyz/uploads/posts/t/l-1229-the-two-states-of-every-programmer.jpg"></div>
    </div>
    <div class="flexItem">
       <div class="flexItem2"><img src="https://meme.xyz/uploads/posts/t/l-1229-the-two-states-of-every-programmer.jpg"></div>
       <div class="flexItem1">
          <p>Place</p>
          <h3>d &amp; u 3</h3>
          <a href="http//link/d-u/">sometext bla bla </a><br><a href="http//link/d-u/"><i class="x-icon x-icon-arrow-right" data-x-icon="" aria-hidden="true"></i></a>
       </div>
    </div>
    <div class="flexItem">
       <div class="flexItem1">
          <p>Place</p>
          <h3>d &amp; u 2</h3>
          <a href="http//link/matrimonio-test2/">sometext bla bla </a><br><a href="http//link/matrimonio-test2/"><i class="x-icon x-icon-arrow-right" data-x-icon="" aria-hidden="true"></i></a>
       </div>
       <div class="flexItem2"><img src="https://meme.xyz/uploads/posts/t/l-1229-the-two-states-of-every-programmer.jpg"></div>
    </div>
    <div class="flexItem">
       <div class="flexItem2"><img src="https://meme.xyz/uploads/posts/t/l-1229-the-two-states-of-every-programmer.jpg"></div>
       <div class="flexItem1">
          <p>Place</p>
          <h3>u &amp; d 1</h3>
          <a href="http//link/matrimonio-test/">sometext bla bla </a><br><a href="http//link/matrimonio-test/"><i class="x-icon x-icon-arrow-right" data-x-icon="" aria-hidden="true"></i></a>
       </div>
    </div>
 </div>
0 голосов
/ 24 сентября 2018

Здесь у вас нет никакого фактического «наложения», вы просто устанавливаете фон самого элемента .flexItem .Так что, конечно, цвет фона , который вы устанавливаете, не «накладывается» на изображение, потому что изображение content элемента, а background , хорошо, сзади ...

Вы можете просто использовать вместо этого псевдоэлемент, расположенный над остальным элементом: 

$('.flexItem').hover(
        function() {
            $(this).addClass( 'overlay' );
            console.log('hover')
          }, function() {
          $(this).removeClass( 'overlay' ); 
            console.log('no hover')
          }
    );
.flexCont{
    display: flex;
    display: -ms-flex;
	display: -webkit-flex;
    flex-direction: row;
}

.flexContO{
    display: flex;
    display: -ms-flex;
	display: -webkit-flex;
    flex-direction: row;
}

.flexContO>div{
    width:50%;
}

.flexCont .flexItem{
    flex: 1 1 25%;
}

.flexItem{
    display: flex;
    flex-direction: column;
    position: relative;
}
.overlay::after{
    content: "";
    position: absolute;
    top:0; bottom:0; left:0; right:0;
    background-color: rgba(0,0,0,.5); /*dim the background*/
  }

.flexItemV{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.flexItemO{
    display: flex;
    flex-direction: row;  
}
.flexItemO>div{
    width:50%;
}

.flexItem1{
   height:375px;
   justify-content: center;
   align-items: center;
   display: flex;
   flex-direction: column;
   text-align:center;
   padding:20px;
}

.flexItem2>img{
    width: 100%;z-index:99!important;
}

.flexItemV1{

}
.flexItemV2{
    
}

.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flexCont">
    <div class="flexItem">
       <div class="flexItem1">
          <p>Place</p>
          <h3>u &amp; d 4</h3>
          <a href="http//link/u-d/">sometext bla bla </a><br><a href="http//link/u-d/"><i class="x-icon x-icon-arrow-right" data-x-icon="" aria-hidden="true"></i></a>
       </div>
       <div class="flexItem2"><img src="https://meme.xyz/uploads/posts/t/l-1229-the-two-states-of-every-programmer.jpg"></div>
    </div>
    <div class="flexItem">
       <div class="flexItem2"><img src="https://meme.xyz/uploads/posts/t/l-1229-the-two-states-of-every-programmer.jpg"></div>
       <div class="flexItem1">
          <p>Place</p>
          <h3>d &amp; u 3</h3>
          <a href="http//link/d-u/">sometext bla bla </a><br><a href="http//link/d-u/"><i class="x-icon x-icon-arrow-right" data-x-icon="" aria-hidden="true"></i></a>
       </div>
    </div>
    <div class="flexItem">
       <div class="flexItem1">
          <p>Place</p>
          <h3>d &amp; u 2</h3>
          <a href="http//link/matrimonio-test2/">sometext bla bla </a><br><a href="http//link/matrimonio-test2/"><i class="x-icon x-icon-arrow-right" data-x-icon="" aria-hidden="true"></i></a>
       </div>
       <div class="flexItem2"><img src="https://meme.xyz/uploads/posts/t/l-1229-the-two-states-of-every-programmer.jpg"></div>
    </div>
    <div class="flexItem">
       <div class="flexItem2"><img src="https://meme.xyz/uploads/posts/t/l-1229-the-two-states-of-every-programmer.jpg"></div>
       <div class="flexItem1">
          <p>Place</p>
          <h3>u &amp; d 1</h3>
          <a href="http//link/matrimonio-test/">sometext bla bla </a><br><a href="http//link/matrimonio-test/"><i class="x-icon x-icon-arrow-right" data-x-icon="" aria-hidden="true"></i></a>
       </div>
    </div>
 </div>
0 голосов
/ 24 сентября 2018

Хорошо, вы можете использовать псевдоэлемент after для стилизации этого.Проверьте это 

$('.flexItem').hover(
  function() {
    $(this).addClass( 'overlay' );
  }, function() {
    $(this).removeClass( 'overlay' ); 
  }
);
.flexCont {
    display: flex;
    display: -ms-flex;
    display: -webkit-flex;
    flex-direction: row;
}

.flexContO {
    display: flex;
    display: -ms-flex;
    display: -webkit-flex;
    flex-direction: row;
}

.flexContO>div {
    width: 50%;
}

.flexCont .flexItem {
    flex: 1 1 25%;
}

.flexItem {
    display: flex;
    flex-direction: column;
}

.overlay {
    /*dim the background*/
    position: relative;
}

.overlay:after {
    content: "";
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.flexItemV {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.flexItemO {
    display: flex;
    flex-direction: row;
}

.flexItemO>div {
    width: 50%;
}

.flexItem1 {
    height: 375px;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 20px;
}

.flexItem2>img {
    width: 100%;
    z-index: 99 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flexCont">
    <div class="flexItem">
       <div class="flexItem1">
          <p>Place</p>
          <h3>u &amp; d 4</h3>
          <a href="http//link/u-d/">sometext bla bla </a><br><a href="http//link/u-d/"><i class="x-icon x-icon-arrow-right" data-x-icon="" aria-hidden="true"></i></a>
       </div>
       <div class="flexItem2"><img src="https://meme.xyz/uploads/posts/t/l-1229-the-two-states-of-every-programmer.jpg"></div>
    </div>
    <div class="flexItem">
       <div class="flexItem2"><img src="https://meme.xyz/uploads/posts/t/l-1229-the-two-states-of-every-programmer.jpg"></div>
       <div class="flexItem1">
          <p>Place</p>
          <h3>d &amp; u 3</h3>
          <a href="http//link/d-u/">sometext bla bla </a><br><a href="http//link/d-u/"><i class="x-icon x-icon-arrow-right" data-x-icon="" aria-hidden="true"></i></a>
       </div>
    </div>
    <div class="flexItem">
       <div class="flexItem1">
          <p>Place</p>
          <h3>d &amp; u 2</h3>
          <a href="http//link/matrimonio-test2/">sometext bla bla </a><br><a href="http//link/matrimonio-test2/"><i class="x-icon x-icon-arrow-right" data-x-icon="" aria-hidden="true"></i></a>
       </div>
       <div class="flexItem2"><img src="https://meme.xyz/uploads/posts/t/l-1229-the-two-states-of-every-programmer.jpg"></div>
    </div>
    <div class="flexItem">
       <div class="flexItem2"><img src="https://meme.xyz/uploads/posts/t/l-1229-the-two-states-of-every-programmer.jpg"></div>
       <div class="flexItem1">
          <p>Place</p>
          <h3>u &amp; d 1</h3>
          <a href="http//link/matrimonio-test/">sometext bla bla </a><br><a href="http//link/matrimonio-test/"><i class="x-icon x-icon-arrow-right" data-x-icon="" aria-hidden="true"></i></a>
       </div>
    </div>
 </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...