Commit 956007af authored by Mat's avatar Mat

Affichage au survol du légume

parent 7b1768b5
......@@ -35,7 +35,17 @@
data-legume-id="{{ legume.id }}"
style="background-image: url('{{ asset('uploads/images/legumes/') }}{{ legume.image }}');">
{{ legume.nom }}
<div class="overlay">
<div class="texte">
<h5>{{ legume.nom }}</h5>
<p>{{ legume.description }}</p>
</div>
<div class="prixPoids">
<span class="prix">{{ legume.prixUnitaire }}</span>
<span class="devise"></span>
<span class="unite">/{{ legume.unite }}</span>
</div>
</div>
</div>
{% endfor %}
......
......@@ -6,7 +6,9 @@
$("#offre div.item")
.on("mouseenter", function() {
$(this).transition({ scale: 1.25 }, 200, 'linear');
$(this).find('.overlay').transition({ opacity: 0.9 }, 200, 'linear');
})
.on("mouseleave", function() {
$(this).transition({ scale: 1 }, 200, 'linear');
$(this).find('.overlay').transition({ opacity: 0 }, 200, 'linear');
});
......@@ -362,7 +362,9 @@ body#homepage footer#footer .footer {
background-color: white;
}
/**/
/*
* La page today
*/
body#today_one {
}
......@@ -371,7 +373,7 @@ body#today_one #offre.grid {
flex-flow: row wrap;
margin: 2em -2em;
}
body#today_one #offre.grid div.item.image.legume {
#today_one #offre.grid div.item {
flex: 1 0 10%;
position: relative;
min-width: 175px;
......@@ -380,9 +382,38 @@ body#today_one #offre.grid div.item.image.legume {
background-size: cover;
background-color: #242424;
}
body#today_one #offre.grid div.item.image.legume:hover {
#today_one #offre.grid div.item:hover {
z-index: 1;
box-shadow: 0 0 30px 0 black;
}
#today_one #offre.grid div.item .overlay {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
padding: 1em;
background-color: #000000aa;
color: white;
opacity: 0;
}
.overlay div.prixPoids {
position: absolute;
padding: 1em;
bottom: 0;
right: 0;
}
.overlay div.prixPoids {
font-size: 14px;
}
.overlay div.texte h5 {
font-size: 18px;
}
.overlay div.prixPoids span.prix {
font-size: 22px;
}
.overlay div.texte p {
font-size: 10px;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment