1

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. IMAGEN

$(".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>

1 respuesta 1

4

Quita el background-color: #f39c12; de la clase y utiliza el pseudo elemento nth-child() para personalizar cada uno sin necesidad de escribir todo el codigo de nuevo.

		$(".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:hover .blue {
    background-color: #2980b9;
}

figure.snip1281:hover .red {
    background-color: #c0392b;
}

figure.snip1281:hover .yellow {
    background-color: #f39c12;
}

figure.snip1281:hover .green {
    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">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample22.jpg" alt="sample22" />
                <figcaption class="yellow">
                    <h2>Gordon Norman</h2>

                </figcaption>
                <a href="#"></a>
            </figure>
        </div>
        <div class="col-sm-3 mb-2">
            <figure class="snip1281">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample20.jpg" alt="sample20" />
                <figcaption class="blue">
                    <h2>Bailey Wonger</h2>
                </figcaption>
                <a href="#"></a>
            </figure>
        </div>
        <div class="col-sm-3 mb-2">
            <figure class="snip1281">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample20.jpg" alt="sample20" />
                <figcaption class="green">
                    <h2>Bailey Wonger</h2>
                </figcaption>
                <a href="#"></a>
            </figure>
        </div>
        <div class="col-sm-3 mb-2">
            <figure class="snip1281 azul">
                <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">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample22.jpg" alt="sample22" />
                <figcaption class="green">
                    <h2>Gordon Norman</h2>

                </figcaption>
                <a href="#"></a>
            </figure>
        </div>
        <div class="col-sm-3 mb-4">
            <figure class="snip1281">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample20.jpg" alt="sample20" />
                <figcaption class="blue">
                    <h2>Bailey Wonger</h2>
                </figcaption>
                <a href="#"></a>
            </figure>
        </div>
        <div class="col-sm-3 mb-4">
            <figure class="snip1281">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample20.jpg" alt="sample20" />
                <figcaption class="green">
                    <h2>Bailey Wonger</h2>
                </figcaption>
                <a href="#"></a>
            </figure>
        </div>
        <div class="col-sm-3 mb-4">
            <figure class="snip1281">
                <img src="images/educacion.jpg" alt="educacion" />
                <figcaption class="red">
                    <h2>Educación</h2>
                </figcaption>
                <a href="#"></a>
            </figure>
        </div>
    </div>
</div>
</div>
</section>

7
  • ahhh excelente!!! no lo tuve en cuenta a eso, muchas gracias!
    – MarianoF
    Commented el 7 jul. 2018 a las 21:09
  • Te puedo hacer una consulta @qqwweerrtty, resulta que lo que me pasaste me funciona pero cuando lo quiero poner dentro de cuatros columnas de bootstrap 4 no me aplica los estilos del hover. sabes que puede ser?
    – MarianoF
    Commented el 8 jul. 2018 a las 15:44
  • Necesito que me muestres el código fuente y junto con eso puedo resolver tu problema.
    – qwerty
    Commented el 8 jul. 2018 a las 16:51
  • dale ahi lo edito
    – MarianoF
    Commented el 8 jul. 2018 a las 23:55
  • ahi lo edite arriba, el problema es que no me reconoce los colores de los child
    – MarianoF
    Commented el 9 jul. 2018 a las 0:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.