Hover with mix-blend-multipy

Asked

Viewed 37 times

0

I have a problem when I leave the hotel. Multiply has a strange effect. Check the gif below:

inserir a descrição da imagem aqui

#accordion {
  padding: 80px 0;
}

#accordion .categoria {
  position: relative;
  cursor: pointer;
}

#accordion .categoria h2 {
  color: #fff;
  position: absolute;
  top: calc(50% - 2rem);
  width: 100%;
  text-align: center;
  z-index: 200;
}

#accordion .categoria img {
  filter: brightness(0.5);
  transition: all 500ms;
}

#accordion .categoria:hover img {
  filter: brightness(1);
}

#accordion .categoria .overlay {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 500ms;
  z-index: 100;
}

#accordion .categoria:hover .overlay,
#accordion .active {
  background-color: #970202;
  mix-blend-mode: multiply;
}

#accordion .categoria .divider {
  width: 70%;
  height: 0;
  display: block;
  position: absolute;
  bottom: 0;
  text-align: center;
  transition: all 500ms;
  z-index: 200;
  margin: 0 17%;
  background: #fff;
}

#accordion .categoria:hover .divider {
  height: 17px;
}

#accordion ul {
  padding: 0;
  margin: 0;
}

#accordion ul li {
  list-style: none;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>
    
<div class="container"> 
  <div id="accordion" class="row">

    <!-- box com link para descrição -->
    <div class=" col-3">
      <div class="">
        <div class="categoria" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          <img src="https://i.imgur.com/pQcVh9h.png" class="img-fluid">
          <h2 class="title" data-toggle="collapse" data-target="#multiCollapseExample2" role="button" aria-expanded="false"
            aria-controls="multiCollapseExample2">grelhas argentinas</h2>
          <span class="overlay" data-toggle="collapse" data-target="#multiCollapseExample2" role="button" aria-expanded="false"
            aria-controls="multiCollapseExample2"></span>
          <span class="divider"></span>
        </div>
      </div>
    </div>
    <div class=" col-3">
      <div class="">
        <div class="categoria" data-toggle="collapse" data-target="#collapse4" aria-expanded="true" aria-controls="collap">
          <img src="https://i.imgur.com/pQcVh9h.png" class="img-fluid">
          <h2 class="title" data-toggle="collapse" data-target="#multiCollapseExample2" role="button" aria-expanded="false"
            aria-controls="multiCollapseEx">grelhas argentinas 2</h2>
          <span class="overlay" data-toggle="collapse" data-target="#multiCollapseExample2" role="button" aria-expanded="false"
            aria-controls="multiCollapseExampl"></span>
          <span class="divider"></span>
        </div>
      </div>
    </div>

    <!-- conteúdo de cada imagem -->
    <div class="col-12">
      <div id="collapseOne" class="collapse border " aria-labelledby="headingOne" data-parent="#accordion">
        <div class="">
          1 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
          officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt vice lomo. Leggings occaecat
          craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
          labore sustainable VHS.
        </div>
      </div>
      <div id="collapse4" class="collapse border " aria-labelledby="" data-parent="#accordion">
        <div class="">
          2 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
          officia aute, non cupi
        </div>
      </div>
    </div>

  </div>
</div>

css front-end

  • the effect you want to give and that same red?

  • exact, but as you can notice he blinks when he takes off the Hover

1 answer

2


Face your problem is actually here. Notice this snippet of your code that you are animating property that do not exist before the hover. With this the browser does not know right how to proceed. Another point is that the property mix-blend-mode looks like it’s heavier pro browser render...

#accordion .categoria .overlay {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 500ms;
  z-index: 100;
}

#accordion .categoria:hover .overlay,
#accordion .active {
  background-color: #970202;
  mix-blend-mode: multiply;
}

So my tip is to use a opacidade of 0 in effect, and instead of animating the mix-blend-mode vc encourages opacity. To better understand look at your code treated with this technique.

OBS: I left the comment in CSS

#accordion {
  padding: 80px 0;
}

#accordion .categoria {
  position: relative;
  cursor: pointer;
}

#accordion .categoria h2 {
  color: #fff;
  position: absolute;
  top: calc(50% - 2rem);
  width: 100%;
  text-align: center;
  z-index: 200;
}

#accordion .categoria img {
  filter: brightness(0.5);
  transition: all 500ms;
}

#accordion .categoria:hover img {
  filter: brightness(1);
}

#accordion .categoria .overlay {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #970202;
  mix-blend-mode: multiply;
  z-index: 100;
  opacity:0; /* aqui ele fica invisível já com a cor do bg e o blend-mode*/
  transition: opacity 500ms;
}

#accordion .categoria:hover .overlay,
#accordion .active {
  opacity:1; /* aqui vc mostra ele como um todo */
}

#accordion .categoria .divider {
  width: 70%;
  height: 0;
  display: block;
  position: absolute;
  bottom: 0;
  text-align: center;
  transition: all 500ms;
  z-index: 200;
  margin: 0 17%;
  background: #fff;
}

#accordion .categoria:hover .divider {
  height: 17px;
}

#accordion ul {
  padding: 0;
  margin: 0;
}

#accordion ul li {
  list-style: none;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>
	
<div class="container"> 
	<div id="accordion" class="row">

	<!-- box com link para descrição -->
	<div class=" col-3">
		<div class="">
		<div class="categoria" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
			<img src="https://i.imgur.com/pQcVh9h.png" class="img-fluid">
			<h2 class="title" data-toggle="collapse" data-target="#multiCollapseExample2" role="button" aria-expanded="false"
			aria-controls="multiCollapseExample2">grelhas argentinas</h2>
			<span class="overlay" data-toggle="collapse" data-target="#multiCollapseExample2" role="button" aria-expanded="false"
			aria-controls="multiCollapseExample2"></span>
			<span class="divider"></span>
		</div>
		</div>
	</div>
	<div class=" col-3">
		<div class="">
		<div class="categoria" data-toggle="collapse" data-target="#collapse4" aria-expanded="true" aria-controls="collap">
			<img src="https://i.imgur.com/pQcVh9h.png" class="img-fluid">
			<h2 class="title" data-toggle="collapse" data-target="#multiCollapseExample2" role="button" aria-expanded="false"
			aria-controls="multiCollapseEx">grelhas argentinas 2</h2>
			<span class="overlay" data-toggle="collapse" data-target="#multiCollapseExample2" role="button" aria-expanded="false"
			aria-controls="multiCollapseExampl"></span>
			<span class="divider"></span>
		</div>
		</div>
	</div>

	<!-- conteúdo de cada imagem -->
	<div class="col-12">
		<div id="collapseOne" class="collapse border " aria-labelledby="headingOne" data-parent="#accordion">
		<div class="">
			1 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
			officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt vice lomo. Leggings occaecat
			craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
			labore sustainable VHS.
		</div>
		</div>
		<div id="collapse4" class="collapse border " aria-labelledby="" data-parent="#accordion">
		<div class="">
			2 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
			officia aute, non cupi
		</div>
		</div>
	</div>

	</div>
</div>

  • 1

    when I grow up I want to be like you hahaha

  • 1

    after ready this site I will send you, you did practically it all hahaha

  • @Lucas can pay me with beer. The important thing is that you stop to see what has been done, pay attention to the details and go redoing on your own. Already you will start to ask less and answer more :D Never stop studying!

Browser other questions tagged css front-end

You are not signed in. Login or sign up in order to post.