Hi, I'm having a problem with the text that I apply to the image of a bootstrap carousel, the problem is when it does the hover, where the content stays fixed. But it should do the same effect as the text below. The content not adaptable to the effect is (the calendar icon and the date. here is the clearest example at the bottom of the page )
$("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>