J'aimerais créer une boîte de nouvelles qui commence par un titre sur une image de fond mais, lorsque l'utilisateur passe la souris dessus, le titre et la description de la nouvelle remplissent l'image de fond, comme les blocs de nouvelles. aquí .
Voici ce que j'ai bricolé :
$(document).ready(function() {
$('.thumb-box').hover(function() {
$(this).find('.news-item').removeClass('only-title')
$(this).find('.news-item').addClass('title-and-desc');
$(this).find('.desc-on-image').removeClass('hidden');
}, function() {
$(this).find('.news-item').removeClass('title-and-desc');
$(this).find('.news-item').addClass('only-title');
$(this).find('.desc-on-image').addClass('hidden');
});
});
.image-container {
position: relative;
text-align: center;
color: white;
}
.thumb-box {
width: 300px;
height: 240px;
background-size: cover;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
justify-content: flex-end;
margin-bottom: 20px;
}
.only-title {
color: black;
background: rgba(255, 255, 255, .9);
margin: 0;
padding: 1em 1em 1em 1em;
cursor: pointer;
}
.title-and-desc {
color: black;
background: rgba(255, 255, 255, .9);
margin: 0;
padding: 1em 1em 1em 1em;
cursor: pointer;
animation-name: draw-up;
animation-duration: 1s;
}
@keyframes draw-up {
from {
padding: 1em 1em 1em 1em;
}
to {
padding: 1em 1em 8em 1em;
}
}
.clickable {
cursor: pointer;
}
.news-title {
color: black;
}
.news-title a {
color: black;
}
.news-title a:hover {
color: black;
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="thumb-box img-responsive" style="background-image: url(/path/to/photo">
<div class="news-item only-title">
<a class="news-title" href="stackoverflow.com/article/{{$a.Slug}}">
<h4><strong> {{$a.Title}} </strong> </h4>
<div class="desc-on-image hidden">
{{$a.Teaser}} ...
</div>
</a>
</div>
</div>Le problème est double :
-
Il est un peu instable. Les boîtes sautent un peu lorsque la souris arrive dessus sous certains angles.
-
Le div superposé descend dès qu'il glisse vers le haut.
Je me demande comment je peux corriger ces problèmes, ou comment avoir une solution plus robuste pour faire la même fonction ?
