Mix-blend-mode nefunguje

by Petr Haluza

HTML

<div class="wrapper">
<div class="grid">
	<div class="item">
		<figure><img src="https://www.img4.cz/www/img/imgthumb?code=PCHS2769"></figure>
		<h2>Já jsem produkt</h2>
		<h3>5 555 Kč</h3>
	</div>
	<div class="item">
		<figure><img src="https://www.img4.cz/www/img/imgthumb?code=PCHS2769"></figure>
		<h2>Já jsem produkt</h2>
		<h3>5 555 Kč</h3>
	</div>	
</div>
</div>


<div class="flex">

<div class="obal jedna">
	<div class="prvni">
		<div class="druhy">
		<img src="https://www.img4.cz/www/img/imgthumb?code=PCHS2769">
		</div>
	</div>
</div>
<div class="obal">
nadřazený prvek se kterým chceme míchat barvu musí mít background-color, i kdyby byl obrázek.<br>

mix blend nefunguje pokud je v cestě od míchanýho prvku k nadřazenýmu transform:translate, takže owl carousel se musí řešit fixem a to překrýt karusel mlhou s mix blendem
</div>

<div class="obal dve">
	<div class="prvni">
		<div class="druhy">
		<img src="https://www.img4.cz/www/img/imgthumb?code=PCHS2769">
		</div>
	</div>
</div>

</div class="flex">

CSS

/* prvni */
.wrapper {background: white}
.wrapper .grid {display: flex; flex-direction: column; gap: 40px; padding:20px}
.wrapper .item { background: #f1f1f1; display: flex; }
.wrapper .item figure { width: 200px; height:100px}
.wrapper .item img { position: absolute; margin-top: -40px; mix-blend-mode: multiply; max-height:160px }


/* druhy */
.flex { display:flex}
.obal {background: #eee; padding:20px}

.obal img {mix-blend-mode: multiply; max-height:200px}

.jedna .prvni { position: relative}
.jedna .druhy { transform: translateX(5px)} /* PROBLEM */