0

Hola estoy teniendo un problema con el texto que le aplico a la imagen de un carousel en bootstrap, el problema es cuando hace el hover, donde el contenido se queda fijo. Pero deberia hacer el mismo efecto que el texto de abajo. El contenido no adaptable al efecto es (el icono de calendario y la fecha.aquí esta el ejemplo mas claro al final de la pagina)

  $("figure").mouseleave(
    function() {
      $(this).removeClass("hover");
    }
  );
 .leete-tambien h2{
    font-size: 24px;
    font-family: 'Titillium Web', sans-serif;
    font-weight: 700;
    margin: 0;
    margin-bottom: 10px; 
    background: linear-gradient(#febf0d, #039d7a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
}
 .leete-tambien .thumbnail{
  background-color: inherit;
  border: inherit;
}
 .leete-tambien .carousel-indicators{
  bottom: -45px;
}
 .leete-tambien .carousel-indicators li {
  background: #2e2e2e;
  width: 15px;
  height:15px; 
  border: 1px solid #2e2e2e; 
  margin: 0 3px;
}
 .leete-tambien .carousel-indicators .active {
  background: #00a780;
  border: 1px solid #00a780;
  width: 17px;
  height:17px;
}
.leete-tambien figure.snip1084 {
  font-family: 'Titillium Web', sans-serif;
  color: #fff;
  position: relative;
  float: left;
  overflow: hidden;
  margin: 10px 1%;
  min-width: 220px;
  max-width: 281px;
  max-height: 233px;
  width: 100%;
  background: #000000;
  text-align: center;
}

 .leete-tambien figure.snip1084 * {
  -webkit-box-sizing: padding-box;
  box-sizing: padding-box;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

 .leete-tambien figure.snip1084 img {
  opacity: 1;
  width: 100%;
}

 .leete-tambien figure.snip1084 figcaption {
  top: 50%;
  left: 40px;
  right: 40px;
  position: absolute;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
 .leete-tambien figure.snip1084 figcaption span{
  font-size: 16px; 
}
 .leete-tambien figure.snip1084 figcaption span i{
  margin-right: 7px;
}

 .leete-tambien figure.snip1084 figcaption p {
  font-size: 17px;
  font-weight: 500;
  opacity: 0;
  font-family: 'Titillium Web', sans-serif;
  font-weight: 700;
  margin: 0;
  margin-top: 10px;
}

 .leete-tambien figure.snip1084:before,
 .leete-tambien figure.snip1084:after {
  position: absolute;
  top: 20px;
  right: 20px;
  bottom: 20px;
  left: 20px;
  content: '';
  opacity: 0;
  -webkit-transition: opacity 0.6s, -webkit-transform 0.6s;
  transition: opacity 0.6s, -webkit-transform 0.6s, -moz-transform 0.6s, -o-transform 0.6s, transform 0.6s;
}

 .leete-tambien figure.snip1084 a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  z-index: 1;
}

 .leete-tambien figure.snip1084.blue {
  background: #000;
}


 .leete-tambien figure.snip1084:hover img,
 .leete-tambien figure.snip1084.hover img {
  opacity: 0.2;
  -webkit-filter: blur(0.5px);
  filter: blur(0.5px);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

 .leete-tambien figure.snip1084:hover figcaption p,
 .leete-tambien figure.snip1084.hover figcaption p {
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.5);
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

 .leete-tambien figure.snip1084:hover figcaption p,
 .leete-tambien figure.snip1084.hover figcaption p {
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

 .leete-tambien figure.snip1084:hover figcaption span,
 .leete-tambien figure.snip1084.hover figcaption span {
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.5);
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

 .leete-tambien figure.snip1084:hover figcaption span,
.leete-tambien figure.snip1084.hover figcaption span {
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

.leete-tambien figure.snip1084:hover:before,
.leete-tambien figure.snip1084.hover:before,
.leete-tambien figure.snip1084:hover:after,
.leete-tambien figure.snip1084.hover:after {
  opacity: 0.8;
  -webkit-transform: scale(1);
  transform: scale(1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <section class="leete-tambien">
      <div class="container">
          <div class="row">
          <div class="col-md-12 padding-none">
            <h2>LEETE TAMBIÉN...</h2>
            <div id="Carousel" class="carousel slide">
             
            <ol class="carousel-indicators">
                <li data-target="#Carousel" data-slide-to="0" class="active"></li>
                <li data-target="#Carousel" data-slide-to="1"></li>
                <li data-target="#Carousel" data-slide-to="2"></li>
            </ol>
             
            <!-- Carousel items -->
            <div class="carousel-inner">
                
            <div class="item active">
              <div class="row">
                <div class="col-md-3">
                  <div class="thumbnail">
                    <figure class="snip1084 blue hover"><img src="images/notas-destacadas/img-notas-destacadas.jpg" alt="..." />
                      <figcaption>
                        <span><i class="fa fa-calendar-o" aria-hidden="true"></i>10 de Noviembre</span>
                        <p>“El aguijón de la muerte” y el trabajo de William Castle</p>
                      </figcaption>
                      <a href="#"></a>
                    </figure>
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="thumbnail">
                    <figure class="snip1084 blue hover"><img src="images/notas-destacadas/img-notas-destacadas-2.jpg" alt="sample51" />
                      <figcaption>
                        <span><i class="fa fa-calendar-o" aria-hidden="true"></i>9 de Noviembre</span>
                        <p>Entrevista con Hugo Colace, director de fotografía</p>
                      </figcaption>
                      <a href="#"></a>
                    </figure>
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="thumbnail">
                    <figure class="snip1084 blue hover"><img src="images/notas-destacadas/img-notas-destacadas-3.jpg" alt="sample51" />
                      <figcaption>
                        <span><i class="fa fa-calendar-o" aria-hidden="true"></i>9 de Noviembre</span>
                        <p>Mi hist(e)ria en el cine, de María Victoria Menis</p>
                      </figcaption>
                      <a href="#"></a>
                    </figure>
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="thumbnail">
                    <figure class="snip1084 blue hover"><img src="images/notas-destacadas/img-notas-destacadas-4.jpg" alt="sample51" />
                      <figcaption>
                        <span><i class="fa fa-calendar-o" aria-hidden="true"></i>9 de Noviembre</span>
                        <p>Matias Condito, distribuidor y jefe de adquisiciones de SBP Films</p>
                      </figcaption>
                      <a href="#"></a>
                    </figure>
                  </div>
                </div>
              </div>
            </div>
             
            <div class="item">
              <div class="row">
                <div class="col-md-3">
                  <div class="thumbnail">
                    <figure class="snip1084 blue hover"><img src="images/notas-destacadas/img-notas-destacadas.jpg" alt="..." />
                      <figcaption>
                        <span><i class="fa fa-calendar-o" aria-hidden="true"></i>10 de Noviembre</span>
                        <p>“El aguijón de la muerte” y el trabajo de William Castle</p>
                      </figcaption>
                      <a href="#"></a>
                    </figure>
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="thumbnail">
                    <figure class="snip1084 blue hover"><img src="images/notas-destacadas/img-notas-destacadas-2.jpg" alt="sample51" />
                      <figcaption>
                        <span><i class="fa fa-calendar-o" aria-hidden="true"></i>9 de Noviembre</span>
                        <p>Entrevista con Hugo Colace, director de fotografía</p>
                      </figcaption>
                      <a href="#"></a>
                    </figure>
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="thumbnail">
                    <figure class="snip1084 blue hover"><img src="images/notas-destacadas/img-notas-destacadas-3.jpg" alt="sample51" />
                      <figcaption>
                        <span><i class="fa fa-calendar-o" aria-hidden="true"></i>9 de Noviembre</span>
                        <p>Mi hist(e)ria en el cine, de María Victoria Menis</p>
                      </figcaption>
                      <a href="#"></a>
                    </figure>
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="thumbnail">
                    <figure class="snip1084 blue hover"><img src="images/notas-destacadas/img-notas-destacadas-4.jpg" alt="sample51" />
                      <figcaption>
                        <span><i class="fa fa-calendar-o" aria-hidden="true"></i>9 de Noviembre</span>
                        <p>Matias Condito, distribuidor y jefe de adquisiciones de SBP Films</p>
                      </figcaption>
                      <a href="#"></a>
                    </figure>
                  </div>
                </div>
              </div>
            </div>
             
            <div class="item">
              <div class="row">
                <div class="col-md-3">
                  <div class="thumbnail">
                    <figure class="snip1084 blue hover"><img src="images/notas-destacadas/img-notas-destacadas.jpg" alt="..." />
                      <figcaption>
                        <span><i class="fa fa-calendar-o" aria-hidden="true"></i>10 de Noviembre</span>
                        <p>“El aguijón de la muerte” y el trabajo de William Castle</p>
                      </figcaption>
                      <a href="#"></a>
                    </figure>
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="thumbnail">
                    <figure class="snip1084 blue hover"><img src="images/notas-destacadas/img-notas-destacadas-2.jpg" alt="sample51" />
                      <figcaption>
                        <span><i class="fa fa-calendar-o" aria-hidden="true"></i>9 de Noviembre</span>
                        <p>Entrevista con Hugo Colace, director de fotografía</p>
                      </figcaption>
                      <a href="#"></a>
                    </figure>
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="thumbnail">
                    <figure class="snip1084 blue hover"><img src="images/notas-destacadas/img-notas-destacadas-3.jpg" alt="sample51" />
                      <figcaption>
                        <span><i class="fa fa-calendar-o" aria-hidden="true"></i>9 de Noviembre</span>
                        <p>Mi hist(e)ria en el cine, de María Victoria Menis</p>
                      </figcaption>
                      <a href="#"></a>
                    </figure>
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="thumbnail">
                    <figure class="snip1084 blue hover"><img src="images/notas-destacadas/img-notas-destacadas-4.jpg" alt="sample51" />
                      <figcaption>
                        <span><i class="fa fa-calendar-o" aria-hidden="true"></i>9 de Noviembre</span>
                        <p>Matias Condito, distribuidor y jefe de adquisiciones de SBP Films</p>
                      </figcaption>
                      <a href="#"></a>
                    </figure>
                  </div>
                </div>
              </div>
            </div>
             
            </div><!--.carousel-inner-->
            </div><!--.Carousel-->
                       
          </div>
        </div>
      </div><!--.container-->
    </section>
<!-- Latest compiled and minified CSS -->
<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>

2
  • Hola Mariano, y cuales el problema ? yo veo que funciona....explícate mejor para poderte ayudar :D el 12 dic. 2017 a las 13:29
  • nose si viste el sitio el link que adjunte del sitio para ver el ejemplo mas claro, el carosuel funciona todo bien, el problema es con el texto con el icono del calendario y lo que dice 10 de noviembre que se queda quieto y no hace la transición como el texto de abajo. se comprende? Yo quiero que todo el contenido de texto se aplique al efecto de aparecer y desaparecer.
    – MarianoF
    el 12 dic. 2017 a las 13:33

1 respuesta 1

1

El tema era de estilos, debías indicarle al elemento span que debe tener un opacity: 0 cuando el elemento figure no tenga la clase hover.

$("figure").mouseleave(
    function() {
      $(this).removeClass("hover");
    }
  );
.leete-tambien h2{
    font-size: 24px;
    font-family: 'Titillium Web', sans-serif;
    font-weight: 700;
    margin: 0;
    margin-bottom: 10px; 
    background: linear-gradient(#febf0d, #039d7a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
}
 .leete-tambien .thumbnail{
  background-color: inherit;
  border: inherit;
}
 .leete-tambien .carousel-indicators{
  bottom: -45px;
}
 .leete-tambien .carousel-indicators li {
  background: #2e2e2e;
  width: 15px;
  height:15px; 
  border: 1px solid #2e2e2e; 
  margin: 0 3px;
}
 .leete-tambien .carousel-indicators .active {
  background: #00a780;
  border: 1px solid #00a780;
  width: 17px;
  height:17px;
}
.leete-tambien figure.snip1084 {
  font-family: 'Titillium Web', sans-serif;
  color: #fff;
  position: relative;
  float: left;
  overflow: hidden;
  margin: 10px 1%;
  min-width: 220px;
  max-width: 281px;
  min-height: 233px;
  width: 100%;
  background: #000000;
  text-align: center;
}

 .leete-tambien figure.snip1084 * {
  -webkit-box-sizing: padding-box;
  box-sizing: padding-box;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

 .leete-tambien figure.snip1084 img {
  opacity: 1;
  width: 100%;
}

 .leete-tambien figure.snip1084 figcaption {
  top: 50%;
  left: 40px;
  right: 40px;
  position: absolute;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
 .leete-tambien figure.snip1084 figcaption span{
  font-size: 16px;
  opacity: 0;
}
 .leete-tambien figure.snip1084 figcaption span i{
  margin-right: 7px;
}

 .leete-tambien figure.snip1084 figcaption p {
  font-size: 17px;
  font-weight: 500;
  opacity: 0;
  font-family: 'Titillium Web', sans-serif;
  font-weight: 700;
  margin: 0;
  margin-top: 10px;
}

 .leete-tambien figure.snip1084:before,
 .leete-tambien figure.snip1084:after {
  position: absolute;
  top: 20px;
  right: 20px;
  bottom: 20px;
  left: 20px;
  content: '';
  opacity: 0;
  -webkit-transition: opacity 0.6s, -webkit-transform 0.6s;
  transition: opacity 0.6s, -webkit-transform 0.6s, -moz-transform 0.6s, -o-transform 0.6s, transform 0.6s;
}

 .leete-tambien figure.snip1084 a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  z-index: 1;
}

 .leete-tambien figure.snip1084.blue {
  background: #000;
}


 .leete-tambien figure.snip1084:hover img,
 .leete-tambien figure.snip1084.hover img {
  opacity: 0.2;
  -webkit-filter: blur(0.5px);
  filter: blur(0.5px);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

 .leete-tambien figure.snip1084:hover figcaption p,
 .leete-tambien figure.snip1084.hover figcaption p {
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.5);
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

 .leete-tambien figure.snip1084:hover figcaption p,
 .leete-tambien figure.snip1084.hover figcaption p {
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

 .leete-tambien figure.snip1084:hover figcaption span,
 .leete-tambien figure.snip1084.hover figcaption span {
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.5);
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

 .leete-tambien figure.snip1084:hover figcaption span,
.leete-tambien figure.snip1084.hover figcaption span {
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

.leete-tambien figure.snip1084:hover:before,
.leete-tambien figure.snip1084.hover:before,
.leete-tambien figure.snip1084:hover:after,
.leete-tambien figure.snip1084.hover:after {
  opacity: 0.8;
  -webkit-transform: scale(1);
  transform: scale(1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <section class="leete-tambien">
      <div class="container">
          <div class="row">
          <div class="col-md-12 padding-none">
            <h2>LEETE TAMBIÉN...</h2>
            <div id="Carousel" class="carousel slide">
             
            <ol class="carousel-indicators">
                <li data-target="#Carousel" data-slide-to="0" class="active"></li>
                <li data-target="#Carousel" data-slide-to="1"></li>
                <li data-target="#Carousel" data-slide-to="2"></li>
            </ol>
             
            <!-- Carousel items -->
            <div class="carousel-inner">
                
            <div class="item active">
              <div class="row">
                <div class="col-md-3">
                  <div class="thumbnail">
                    <figure class="snip1084 blue hover"><img src="images/notas-destacadas/img-notas-destacadas.jpg" alt="..." />
                      <figcaption>
                        <span><i class="fa fa-calendar-o" aria-hidden="true"></i>10 de Noviembre</span>
                        <p>“El aguijón de la muerte” y el trabajo de William Castle</p>
                      </figcaption>
                      <a href="#"></a>
                    </figure>
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="thumbnail">
                    <figure class="snip1084 blue hover"><img src="images/notas-destacadas/img-notas-destacadas-2.jpg" alt="sample51" />
                      <figcaption>
                        <span><i class="fa fa-calendar-o" aria-hidden="true"></i>9 de Noviembre</span>
                        <p>Entrevista con Hugo Colace, director de fotografía</p>
                      </figcaption>
                      <a href="#"></a>
                    </figure>
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="thumbnail">
                    <figure class="snip1084 blue hover"><img src="images/notas-destacadas/img-notas-destacadas-3.jpg" alt="sample51" />
                      <figcaption>
                        <span><i class="fa fa-calendar-o" aria-hidden="true"></i>9 de Noviembre</span>
                        <p>Mi hist(e)ria en el cine, de María Victoria Menis</p>
                      </figcaption>
                      <a href="#"></a>
                    </figure>
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="thumbnail">
                    <figure class="snip1084 blue hover"><img src="images/notas-destacadas/img-notas-destacadas-4.jpg" alt="sample51" />
                      <figcaption>
                        <span><i class="fa fa-calendar-o" aria-hidden="true"></i>9 de Noviembre</span>
                        <p>Matias Condito, distribuidor y jefe de adquisiciones de SBP Films</p>
                      </figcaption>
                      <a href="#"></a>
                    </figure>
                  </div>
                </div>
              </div>
            </div>
             
            <div class="item">
              <div class="row">
                <div class="col-md-3">
                  <div class="thumbnail">
                    <figure class="snip1084 blue hover"><img src="images/notas-destacadas/img-notas-destacadas.jpg" alt="..." />
                      <figcaption>
                        <span><i class="fa fa-calendar-o" aria-hidden="true"></i>10 de Noviembre</span>
                        <p>“El aguijón de la muerte” y el trabajo de William Castle</p>
                      </figcaption>
                      <a href="#"></a>
                    </figure>
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="thumbnail">
                    <figure class="snip1084 blue hover"><img src="images/notas-destacadas/img-notas-destacadas-2.jpg" alt="sample51" />
                      <figcaption>
                        <span><i class="fa fa-calendar-o" aria-hidden="true"></i>9 de Noviembre</span>
                        <p>Entrevista con Hugo Colace, director de fotografía</p>
                      </figcaption>
                      <a href="#"></a>
                    </figure>
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="thumbnail">
                    <figure class="snip1084 blue hover"><img src="images/notas-destacadas/img-notas-destacadas-3.jpg" alt="sample51" />
                      <figcaption>
                        <span><i class="fa fa-calendar-o" aria-hidden="true"></i>9 de Noviembre</span>
                        <p>Mi hist(e)ria en el cine, de María Victoria Menis</p>
                      </figcaption>
                      <a href="#"></a>
                    </figure>
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="thumbnail">
                    <figure class="snip1084 blue hover"><img src="images/notas-destacadas/img-notas-destacadas-4.jpg" alt="sample51" />
                      <figcaption>
                        <span><i class="fa fa-calendar-o" aria-hidden="true"></i>9 de Noviembre</span>
                        <p>Matias Condito, distribuidor y jefe de adquisiciones de SBP Films</p>
                      </figcaption>
                      <a href="#"></a>
                    </figure>
                  </div>
                </div>
              </div>
            </div>
             
            <div class="item">
              <div class="row">
                <div class="col-md-3">
                  <div class="thumbnail">
                    <figure class="snip1084 blue hover"><img src="images/notas-destacadas/img-notas-destacadas.jpg" alt="..." />
                      <figcaption>
                        <span><i class="fa fa-calendar-o" aria-hidden="true"></i>10 de Noviembre</span>
                        <p>“El aguijón de la muerte” y el trabajo de William Castle</p>
                      </figcaption>
                      <a href="#"></a>
                    </figure>
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="thumbnail">
                    <figure class="snip1084 blue hover"><img src="images/notas-destacadas/img-notas-destacadas-2.jpg" alt="sample51" />
                      <figcaption>
                        <span><i class="fa fa-calendar-o" aria-hidden="true"></i>9 de Noviembre</span>
                        <p>Entrevista con Hugo Colace, director de fotografía</p>
                      </figcaption>
                      <a href="#"></a>
                    </figure>
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="thumbnail">
                    <figure class="snip1084 blue hover"><img src="images/notas-destacadas/img-notas-destacadas-3.jpg" alt="sample51" />
                      <figcaption>
                        <span><i class="fa fa-calendar-o" aria-hidden="true"></i>9 de Noviembre</span>
                        <p>Mi hist(e)ria en el cine, de María Victoria Menis</p>
                      </figcaption>
                      <a href="#"></a>
                    </figure>
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="thumbnail">
                    <figure class="snip1084 blue hover"><img src="images/notas-destacadas/img-notas-destacadas-4.jpg" alt="sample51" />
                      <figcaption>
                        <span><i class="fa fa-calendar-o" aria-hidden="true"></i>9 de Noviembre</span>
                        <p>Matias Condito, distribuidor y jefe de adquisiciones de SBP Films</p>
                      </figcaption>
                      <a href="#"></a>
                    </figure>
                  </div>
                </div>
              </div>
            </div>
             
            </div><!--.carousel-inner-->
            </div><!--.Carousel-->
                       
          </div>
        </div>
      </div><!--.container-->
    </section>
<!-- Latest compiled and minified CSS -->
<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>

2
  • Claro eso era lo que quería, había probado agregarle el mismo estilo del p al span pero no me lo tomaba.
    – MarianoF
    el 12 dic. 2017 a las 13:58
  • @MarianoFranco realmente solo necesitabas la propiedad opacity ya que es la única que está haciendo interacción, te invito a que consideres aceptar la respuesta para que sea de ayuda a otros desarrolladores, saludos !! el 12 dic. 2017 a las 14:00

Tu Respuesta

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

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