1
I am trying to make an effect that, when passing the mouse on some topic, the others decrease the opacity, highlighting the topic on which the mouse is. In addition, the Hover changes the color from a gray to a green. It’s almost all working. Here I put the main part of the effect (so it is disfigured), but the effect is being done correctly. If I hover over the icon, ok, the icon and phrase turn green. But if I mouse over the phrase, only it turns green.
/****** Auxiliar ******/
.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-xs-5ths {
width: 20%;
float: left;
}
@media (min-width: 768px) {
.col-sm-5ths {
width: 20%;
float: left;
}
}
@media (min-width: 992px) {
.col-md-5ths {
width: 20%;
float: left;
}
}
@media (min-width: 1200px) {
.col-lg-5ths {
width: 20%;
float: left;
}
}
/****** Auxiliar ******/
.icones_servicos{
padding-top: 60px;
padding-bottom: 20px;
}
.icones_servicos a {
transition: all 0.4s linear;
text-decoration: none;
color: #00E394;
}
.icones_servicos h4, .icones_servicos a p, .icones_servicos i{
transition: all 0.2s linear;
}
.row:hover .icones_servicos:not(:hover) a, .row:hover .icones_servicos:not(:hover) h4, .row:hover .icones_servicos:not(:hover) a p {
opacity: 0.5;
}
.row:hover .icones_servicos:not(:hover) i{
opacity: 0.5;
}
.icones_servicos i{
color: #8A919B;
/* background-image: linear-gradient(to right bottom, #00E394, #007c78, #006c77, #005c71, #004c66);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; */
font-size: 44px;
}
.icones_servicos h4{
color: #8A919B;
font-size: 1.02rem;
}
.icones_servicos i:hover, .icones_servicos i:hover ~ .categoria-servico{
color: #00E394;
}
.icones_servicos h4:hover, .icones_servicos h4:hover ~ .icones-home{
color: #00E394;
}
.icon_wrapclearfix{
border-top: 1px solid #c5c5c5;
margin-top: 4em;
}
.icon_wrapclearfix a {
-webkit-transition-duration: .5s;
-moz-transition-duration: .5s;
transition-duration: .5s;
padding-top: 5em;
position: relative;
text-align: center;
}
.icon_wrapclearfix a:before {
border-radius: 1em;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
position: absolute;
top: -0.05em;
height: 1em;
width: 1em;
background-color: #00E394;
content: "";
margin-left: 1em;
}
.icon_wrapclearfix a:hover:before{
opacity: 1;
-webkit-transition: all .15s ease-out;
-moz-transition: all .15s ease-out;
transition: all .15s ease-out;
}
.icon_wrapclearfix_outros a:before {
margin-left: 8.7em;
} <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<section id="about" class="padding bg_light">
<div class="container">
<div class="text-center">
<h2 class="heading"><span>Nossos </span> Serviços <span class="divider-center"></span><div class="diviver_aux_30"></div></h2>
</div>
<div class="row">
<div class="col-sm-12 text-center">
<h2 class="heading"></h2>
</div>
<div class="icon_wrapclearfix">
<div class="col-xs-12 col-sm-5ths col-md-5ths text-center icones_servicos" data-wow-delay="300ms">
<a href="#">
<i class="fa fa-address-book icones-home"></i>
<h4 class="text-capitalize bottom20 margin10 categoria-servico">Contabilidade</h4>
</a>
</div>
<div class="col-xs-12 col-sm-5ths col-md-5ths text-center icones_servicos" data-wow-delay="300ms">
<a href="#">
<i class="fa fa-address-book icones-home"></i>
<h4 class="text-capitalize bottom20 margin10 categoria-servico">Escrituração Fiscal</h4>
</a>
</div>
<div class="col-xs-12 col-sm-5ths col-md-5ths text-center icones_servicos" data-wow-delay="300ms">
<a href="#">
<i class="fa fa-address-book icones-home"></i>
<h4 class="text-capitalize bottom20 margin10 categoria-servico">Rotinas Trabalhistas (DP)</h4>
</a>
</div>
<div class="col-xs-12 col-sm-5ths col-md-5ths text-center icones_servicos" data-wow-delay="300ms">
<a href="#">
<i class="fa fa-address-book icones-home"></i>
<h4 class="text-capitalize bottom20 margin10 categoria-servico">Tributos</h4>
</a>
</div>
<div class="col-xs-12 col-sm-5ths col-md-5ths text-center icones_servicos" data-wow-delay="300ms">
<a href="#">
<i class="fa fa-address-book icones-home"></i>
<h4 class="text-capitalize bottom20 margin10 categoria-servico">Finanças</h4>
</a>
</div>
</div>
</div>
</div>
</section>