Как сделать плавную прозрачность картинки?

@Kazer · Регистрация: 03.02.2018

Author24 — интернет-сервис помощи студентам

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

@tnfsk · 05.05.2019, 16:56

так может jsfiddle

HTML5

<div class="container">
<div class="grid">
  <div class="cell"><img class="imgA" src="https://pixy.org/placeholder/5cce8f79f34c3.jpg" />
    <div class="text">
      <p>До конца апреля мы, казалось, двигались к цели с трудом, но неуклонно и преодолевали все затруднения. Правительство Свободного государства действовало неровно, но все более и более энергично, а партийная и парламентская ситуация в Англии не создавала
        нам препятствий. Все наши надежды были сосредоточены на том, что в Ирландии состоятся свободные выборы, и ирландский народ выберет представляющее его национальное собрание.</p>
    </div>
    <div class="snare"></div>
    <div class="shellImg"><img class="imgB" src="https://pixy.org/placeholder/5cce8f79f34c3.jpg" /></div>
  </div>
  <div class="cell"> <img class="imgA" src="https://pixy.org/placeholder/5cce8fb462db6.jpg" />
    <div class="text">
      <p>В конце мая произошло новое событие, совершенно расстраивавшее мои планы. 19 мая Гриффитс заявил республиканцам, заседавшим в национальном собрании, что их насильственная тактика отстаивается не больше чем двумя процентами всего ирландского населения
        и что «избранный ими путь делает их наихудшими изменниками ирландского дела, ибо благодаря их поступкам возвращение английских войск становится неизбежным». </p>
    </div>
    <div class="snare"> </div>
    <div class="shellImg"><img class="imgB" src="https://pixy.org/placeholder/5cce8fb462db6.jpg" /></div>
  </div>
</div>
</div>

CSS

*{
  box-sizing: border-box;
}
 
.container{
  max-width: 960px;
  margin: 0 auto;
}
 
.grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
}
 
.cell{
  position: relative;
}
 
.imgA{
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}
 
.text{
  position: relative;
  padding: 50px 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.5;
  font-size: 15px;
  background-color: RGBA(255, 255, 255, 0.7);
  z-index: 20;
}
 
.text p {
  margin: 0;
}
 
.snare{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 40;
}
 
.shellImg{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 30;
  transition: height .5s;
  overflow: hidden;
}
 
.imgB{
  display: block;
  width: 100%;
  height: 100%;
  
}

Javascript

$('.snare').mouseover(function(){
  //alert('ff');
  var shellImg = $(this).parent().find('.shellImg');
  var imgB = shellImg.find('.imgB');
  var h = imgB.outerHeight();
  h = h + 'px';
  imgB.css('height', h);
  shellImg.css('height', '0%');
});
 
$('.snare').mouseout(function(){
  var shellImg = $(this).parent().find('.shellImg');
  var imgB = shellImg.find('.imgB');
  shellImg.css('height', '100%');
  
  // время нужно менять в соответсвии с transition в  css
  window.setTimeout(function(){
    imgB.css('height', '100%');
  }, 500);
 
})

@Kazer · 06.05.2019, 09:24 **[ТС]**

Сообщение от tnfsk

так может jsfiddle

нет ...не при ховере.

1. первая проблема-просто есть контэнт на странице(блоки разные) и сзади фон картинки. и этот фон должен быть полупрозрачным при этом блоки на ней должны быть не тронутыми. opacity и фон и все блоки на нем кинет в прозрачность, а мне нужно только фон.

2. вторая проблема -есть картинка к примеру надпись ЛОЛ и надо сделать так , чтобы в отверстии О к примеру было прозрачно и где буквы Л в отверстии тоже ....КРЧ чтоб контур был не тронут, а всё остальное было прозпрачно

@Kazer 0 / 0 / 0 Регистрация: 03.02.2018 Сообщений: 286
		1
	Как сделать плавную прозрачность картинки? 05.05.2019, 08:24. Показов 3011. Ответов 2 Метки нет (Все метки) есть картинки на background и надо чтоб она постепенно становилась прозрачной. сверху вниз и у другой снизу вверх. и чтоб ещё чуть чуть беловатой отдавала в глаза. важно чтоб менялся сам бэкграунд , а блоки, которые там , остались не тронутыми. Помогите , пожалуйста, заранее спасибо 0

@Kazer 0 / 0 / 0 Регистрация: 03.02.2018 Сообщений: 286
	06.05.2019, 09:24 [ТС]	3
	Сообщение от tnfsk так может jsfiddle нет ...не при ховере. 1. первая проблема-просто есть контэнт на странице(блоки разные) и сзади фон картинки. и этот фон должен быть полупрозрачным при этом блоки на ней должны быть не тронутыми. opacity и фон и все блоки на нем кинет в прозрачность, а мне нужно только фон. 2. вторая проблема -есть картинка к примеру надпись ЛОЛ и надо сделать так , чтобы в отверстии О к примеру было прозрачно и где буквы Л в отверстии тоже ....КРЧ чтоб контур был не тронут, а всё остальное было прозпрачно 0