bringing the <p> tag in front of a div

Question

bringing the <p> tag in front of a div

Asked 6 years, 3 months ago

Viewed 132 times

1

I have the following code:

	$("[data-ripple]").hover(function(e) {
    
    var $self = $(this.parentNode);
    var $color = $(this).data("ripple");
	var $divServicos = document.getElementById("div-servicos");
		
    
    if($self.is(".btn-disabled")) {
      return;
    }
    if($self.closest("[data-ripple]")) {
      e.stopPropagation();
    }
    
    var initPos = $self.css("position"),
        offs = $self.offset(),
        x = e.pageX - offs.left,
        y = e.pageY - offs.top,
        dia = Math.min(this.offsetHeight, this.offsetWidth, 100), // start diameter
        $ripple = $('<div/>', {class : "ripple",appendTo : $self });
    
    if(!initPos || initPos==="static") {
      $self.css({position:"relative"});
    }
    
    $('<div/>', {
      class : "rippleWave",
      css : {
        background: $color,
        width: dia,
        height: dia,
        left: x - (dia/2),
        top: y - (dia/2),
      },
      appendTo : $ripple
    });
		$divServicos.setAttribute("style","color: rgba(255,255,255, 1); background-color: rgba(20,94,69,1.00);");
		var texto = $($self).html();
        texto = texto.substr(0, texto.indexOf('<a'));
        $(".ripple").append(texto);
  }, function(e) {
		$('div.ripple').remove();
		document.getElementById("div-servicos").setAttribute("style","color: green");
  });

.div-secao {
	width: auto;
	position: relative;
	overflow: hidden;
	margin: 0 auto;
	height: auto;
}

.box-content-informacoes{
	margin: 100px auto 5px auto;
	height: auto;
	background-color: rgba(255,255,255,1);
	text-align: center;
	font-family: "passion-one";
	color: #1A7F5F;
	font-size: 25px;
	line-height: 30px;
	transition: max-height 250ms ease;
	max-height: auto;
}

#div-servicos {
	transition: all 150ms ease;
	
}
#h1Servicos {
	font-size: 60px;
	font-family: 'Bebas Neue';
}

.ripple{
	position: absolute;
	top:0; left:0; bottom:0; right:0;
	overflow: hidden;
	-webkit-transform: translateZ(0); /* to contain zoomed ripple */
	transform: translateZ(0);
	border-radius: inherit; /* inherit from parent (rounded buttons etc) */
	pointer-events: none; /* allow user interaction */
		  animation: ripple-shadow 0.4s forwards;
	-webkit-animation: ripple-shadow 0.4s forwards;
}
.rippleWave{
	backface-visibility: hidden;
	position: relative;
	border-radius: 50%;
	transform: scale(0.7); -webkit-transform: scale(0.7);
	background: rgba(255,255,255, 1);
	opacity: 0.6;
		  animation: ripple 4s forwards;
	-webkit-animation: ripple 4s forwards;
}

@keyframes ripple-shadow {
  0%   {box-shadow: 0 0 0 rgba(0,0,0,0.0);}
  20%  {box-shadow: 0 4px 16px rgba(0,0,0,0.3);}
  100% {box-shadow: 0 0 0 rgba(0,0,0,0.0);}
}
@-webkit-keyframes ripple-shadow {
  0%   {box-shadow: 0 0 0 rgba(0,0,0,0.0);}
  20%  {box-shadow: 0 4px 16px rgba(0,0,0,0.3);}
  100% {box-shadow: 0 0 0 rgba(0,0,0,0.0);}
}
@keyframes ripple {
  to {transform: scale(999);}
}
@-webkit-keyframes ripple {
  to {-webkit-transform: scale(999);}
}

<!DOCTYPE html>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<body>
<main>
<article class="container-fluid" style="padding: 0">

<main class="div-secao" id="SecaoServicos">
	<div class="row">
		<div class="col-lg-12">
			<article>
				<div class="box-content-informacoes" id="div-servicos">
					<br>
					<h1 id="h1Servicos">Problemas com seu <strong>negócio? </strong>Podemos te ajudar!</h1>
					<p id="pFonte">Precisa de um rumo no seu negócio, mas ainda não sabe o caminho certo a seguir? Quer divulgar o seu empreendimento e aumentar o seu número de clientes? Ou não tem interesse em negócios, mas é louco para fazer aquele projeto da sua casa dos sonhos que nunca coube no seu bolso? Necessita de novas tecnologias que auxiliem no seu desenvolvimento profissional e pessoal? Entende a importância de projetos de engenharia pra você hoje, mas não consegue pagar? Nós temos a solução para você! Conheça melhor nossos serviços cicando <a id="aLink" data-ripple="rgba(20,94,69,1.00)" href="https://drive.google.com/file/d/1LBk1Xrp1j5zxZaftt_Fr1r_YMUPpELwE/view?usp=sharing"><strong>aqui</strong></a>					
					</p>
				</div>
			</article>
		</div>
	</div>
</main>

</article>
</main>
</body>

What I need to solve is this:

When the Hover event happens, a ripple class div is created with the Absolute position so that it superimposes the native HTML code div. The same text of this native div is inserted within this ripple class div. In addition, a second div is created from the ripple-wave class that aims to create this ripple animation by expanding throughout the div. The text with you on the "p" tag inside the native div, needs to appear without any kind of transparency, in front of that ripple-wave class div.

This "Click here" in the image is the same as the <a id="aLink" data-ripple="rgba(20,94,69,1.00)" href="url"><strong>aqui</strong></a> of the code?

– Sam

2018/08/06 at 01:50
is yes! is the same

– Mikhael Araujo

2018/08/06 at 12:31
See if the answer answers.

– Sam

2018/08/06 at 12:49
friend, I commented your answer! It helped but is still giving an unwanted effect...

– Mikhael Araujo

2018/08/06 at 13:16

1 answer

Browser other questions tagged javascript css

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

by Sam • **79,597** points · Answer 1 · 2018-08-06T02:07:45+00:00

Change the @keyframes so that the background of the new div be transparent, thus showing the text below:

$("[data-ripple]").hover(function(e) {
    var $self = $(this.parentNode);
    var $color = $(this).data("ripple");
	var $divServicos = document.getElementById("div-servicos");

    if($self.is(".btn-disabled")) {
      return;
    }
    if($self.closest("[data-ripple]")) {
      e.stopPropagation();
    }
    
    var initPos = $self.css("position"),
        offs = $self.offset(),
        x = e.pageX - offs.left,
        y = e.pageY - offs.top,
        dia = Math.min(this.offsetHeight, this.offsetWidth, 100), // start diameter
        $ripple = $('<div/>', {class : "ripple",appendTo : $self });
    
    if(!initPos || initPos==="static") {
      $self.css({position:"relative"});
    }
    

    $('<div/>', {
      class : "rippleWave",
      css : {
        background: $color,
        width: dia,
        height: dia,
        left: x - (dia/2),
        top: y - (dia/2),
      },
      appendTo : $ripple
    });
		$divServicos.setAttribute("style","color: rgba(255,255,255, 1); background-color: rgba(20,94,69,1);");
		var pFonte = document.getElementById("pFonte");

  }, function(e) {
		$('div.ripple').remove();
		document.getElementById("div-servicos").setAttribute("style","color: green");
  });

body{
   background: red;
}

.div-secao {
	width: auto;
	position: relative;
	overflow: hidden;
	margin: 0 auto;
	height: auto;
}

.box-content-informacoes{
	margin: 100px auto 5px auto;
	height: auto;
	background-color: rgba(255,255,255,1);
	text-align: center;
	font-family: "passion-one";
	color: #1A7F5F;
	font-size: 25px;
	line-height: 30px;
	transition: max-height 250ms ease;
	max-height: auto;
}

#div-servicos {
	transition: all 150ms ease;
	
}
#h1Servicos {
	font-size: 60px;
	font-family: 'Bebas Neue';
}

.ripple{
    position: absolute;
    top:0; left:0; bottom:0; right:0;
    overflow: hidden;
    -webkit-transform: translateZ(0); /* to contain zoomed ripple */
    transform: translateZ(0);
    border-radius: inherit; /* inherit from parent (rounded buttons etc) */
    pointer-events: none; /* allow user interaction */
          animation: ripple-shadow 0.4s forwards;
    -webkit-animation: ripple-shadow 0.4s forwards;
    z-index: 2;
}

.rippleWave{
    backface-visibility: hidden;
    position: absolute;
    border-radius: 50%;
    transform: scale(0.7); -webkit-transform: scale(0.7);
    background: rgba(255,255,255, 1);
    opacity: 0.7;
          animation: ripple 4s forwards;
    -webkit-animation: ripple 4s forwards;
}

@keyframes ripple-shadow {
  0%   {box-shadow: 0 0 0 rgba(0,0,0,0.0);}
  20%  {box-shadow: 0 4px 16px rgba(0,0,0,0.3);}
  100% {box-shadow: 0 0 0 rgba(0,0,0,0.0);}
}
@-webkit-keyframes ripple-shadow {
  0%   {box-shadow: 0 0 0 rgba(0,0,0,0.0);}
  20%  {box-shadow: 0 4px 16px rgba(0,0,0,0.3);}
  100% {box-shadow: 0 0 0 rgba(0,0,0,0.0);}
}
@keyframes ripple {
  50% {
     background: transparent;
     }
  100% {
     transform: scale(999);
     background: transparent;
     }
}
@-webkit-keyframes ripple {
  50% {
     background: transparent;
     }
  100% {
     transform: scale(999);
     background: transparent;
     }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<article class="container-fluid" style="padding: 0">

<main class="div-secao" id="SecaoServicos">
	<div class="row">
		<div class="col-lg-12">
			<article>
<div class="box-content-informacoes" id="div-servicos">
               <span>
					<br>
					<h1 id="h1Servicos">Problemas com seu <strong>negócio? </strong>Podemos te ajudar!</h1>
					<p id="pFonte">Precisa de um rumo no seu negócio, mas ainda não sabe o caminho certo a seguir? Quer divulgar o seu empreendimento e aumentar o seu número de clientes? Ou não tem interesse em negócios, mas é louco para fazer aquele projeto da sua casa dos sonhos que nunca coube no seu bolso? Necessita de novas tecnologias que auxiliem no seu desenvolvimento profissional e pessoal? Entende a importância de projetos de engenharia pra você hoje, mas não consegue pagar? Nós temos a solução para você! Conheça melhor nossos serviços cicando <a id="aLink" data-ripple="rgba(20,94,69,1.00)" href="https://drive.google.com/file/d/1LBk1Xrp1j5zxZaftt_Fr1r_YMUPpELwE/view?usp=sharing"><strong>aqui</strong></a>					
					</p>
               </span>
				</div>
            			</article>
		</div>
	</div>
</main>

</article>