Estoy haciendo una maqueta y estoy utilizando unos snip1281 que tienen efecto en los hover, cada imagen o carrera tiene un efecto hover de una linea top con color y una caja con el mismo color sobre un texto blanco, pero todas las carreras tienen un color distinto osea que cada caja en su estado hover tendrá su color representativo.
¿COMO PUEDO APLICAR LOS DISTINTOS COLORES A LOS ESTADOS HOVER Y DIFERENCIAR A PARTIR DEL CSS SIN HACER REPETICIÓN DE CÓDIGO?.
Es decir no tener que a cada imagen ponerle snip1281 snip1282 etc etc.
$(".hover").mouseleave(
function() {
$(this).removeClass("hover");
}
);
figure.snip1281 {
font-family: 'Raleway', Arial, sans-serif;
color: #fff;
position: relative;
float: left;
overflow: hidden;
margin: 10px 1%;
min-width: 230px;
max-width: 315px;
max-height: 220px;
width: 100%;
background-color: #000000;
color: #ffffff;
text-align: center;
}
figure.snip1281 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
}
figure.snip1281 img {
opacity: 0.7;
max-width: 100%;
}
figure.snip1281 figcaption {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 20px;
background-color: rgba(0, 0, 0, 0.75);
}
figure.snip1281:hover figcaption,
figure.snip1281.hover figcaption {
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
background-color: #f39c12;
}
figure.snip1281:hover h3,
figure.snip1281.hover h3 {
color: #333;
}
figure.snip1281 h2,
figure.snip1281 span {
margin: 0;
width: 100%;
}
figure.snip1281 h2 {
font-weight: 400;
position: absolute;
bottom: 14px;
width: 233px;
font-size: 26px;
text-align: left;
text-transform: uppercase;
font-family: 'HelveticaNeue57CondensedOblique';
left: 12px;
}
figure.snip1281 a {
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
z-index: 1;
}
figure.snip1281:after {
background: #000000;
width: 0;
height: 6px;
position: absolute;
left: 0;
top: 0;
content: '';
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
figure.snip1281:hover:after,
figure.snip1281.hover:after {
width: 100%;
}
figure.snip1281.blue:after {
background-color: #2980b9;
}
figure.snip1281.red:after {
background-color: #c0392b;
}
figure.snip1281.yellow:after {
background-color: #f39c12;
}
figure.snip1281.green:after {
background-color: #27ae60;
}
figure.snip1281:hover img,
figure.snip1281.hover img {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
figure.snip1281:hover:after,
figure.snip1281.hover:after {
width: 100%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<section class="carreras">
<div class="container">
<div class="row">
<div class="col-sm-3 mb-2">
<figure class="snip1281 yellow">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample22.jpg" alt="sample22" />
<figcaption>
<h2>Gordon Norman</h2>
</figcaption>
<a href="#"></a>
</figure>
</div>
<div class="col-sm-3 mb-2">
<figure class="snip1281 blue">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample20.jpg" alt="sample20" />
<figcaption>
<h2>Bailey Wonger</h2>
</figcaption>
<a href="#"></a>
</figure>
</div>
<div class="col-sm-3 mb-2">
<figure class="snip1281 red">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample20.jpg" alt="sample20" />
<figcaption>
<h2>Bailey Wonger</h2>
</figcaption>
<a href="#"></a>
</figure>
</div>
<div class="col-sm-3 mb-2">
<figure class="snip1281 celeste">
<img src="images/educacion.jpg" alt="educacion" />
<figcaption>
<h2>Educación</h2>
</figcaption>
<a href="#"></a>
</figure>
</div>
<div class="clearfix"></div>
<div class="col-sm-3 mb-4">
<figure class="snip1281 yellow">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample22.jpg" alt="sample22" />
<figcaption>
<h2>Gordon Norman</h2>
</figcaption>
<a href="#"></a>
</figure>
</div>
<div class="col-sm-3 mb-4">
<figure class="snip1281 blue">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample20.jpg" alt="sample20" />
<figcaption>
<h2>Bailey Wonger</h2>
</figcaption>
<a href="#"></a>
</figure>
</div>
<div class="col-sm-3 mb-4">
<figure class="snip1281 red">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample20.jpg" alt="sample20" />
<figcaption>
<h2>Bailey Wonger</h2>
</figcaption>
<a href="#"></a>
</figure>
</div>
<div class="col-sm-3 mb-4">
<figure class="snip1281 celeste">
<img src="images/educacion.jpg" alt="educacion" />
<figcaption>
<h2>Educación</h2>
</figcaption>
<a href="#"></a>
</figure>
</div>
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>