Commit 956007af authored by Mat's avatar Mat

Affichage au survol du légume

parent 7b1768b5
...@@ -35,7 +35,17 @@ ...@@ -35,7 +35,17 @@
data-legume-id="{{ legume.id }}" data-legume-id="{{ legume.id }}"
style="background-image: url('{{ asset('uploads/images/legumes/') }}{{ legume.image }}');"> 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> </div>
{% endfor %} {% endfor %}
......
...@@ -6,7 +6,9 @@ ...@@ -6,7 +6,9 @@
$("#offre div.item") $("#offre div.item")
.on("mouseenter", function() { .on("mouseenter", function() {
$(this).transition({ scale: 1.25 }, 200, 'linear'); $(this).transition({ scale: 1.25 }, 200, 'linear');
$(this).find('.overlay').transition({ opacity: 0.9 }, 200, 'linear');
}) })
.on("mouseleave", function() { .on("mouseleave", function() {
$(this).transition({ scale: 1 }, 200, 'linear'); $(this).transition({ scale: 1 }, 200, 'linear');
$(this).find('.overlay').transition({ opacity: 0 }, 200, 'linear');
}); });
...@@ -362,7 +362,9 @@ body#homepage footer#footer .footer { ...@@ -362,7 +362,9 @@ body#homepage footer#footer .footer {
background-color: white; background-color: white;
} }
/**/ /*
* La page today
*/
body#today_one { body#today_one {
} }
...@@ -371,7 +373,7 @@ body#today_one #offre.grid { ...@@ -371,7 +373,7 @@ body#today_one #offre.grid {
flex-flow: row wrap; flex-flow: row wrap;
margin: 2em -2em; margin: 2em -2em;
} }
body#today_one #offre.grid div.item.image.legume { #today_one #offre.grid div.item {
flex: 1 0 10%; flex: 1 0 10%;
position: relative; position: relative;
min-width: 175px; min-width: 175px;
...@@ -380,9 +382,38 @@ body#today_one #offre.grid div.item.image.legume { ...@@ -380,9 +382,38 @@ body#today_one #offre.grid div.item.image.legume {
background-size: cover; background-size: cover;
background-color: #242424; background-color: #242424;
} }
body#today_one #offre.grid div.item.image.legume:hover { #today_one #offre.grid div.item:hover {
z-index: 1; z-index: 1;
box-shadow: 0 0 30px 0 black; 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