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>