|
|
@@ -30,7 +30,29 @@
|
|
|
width: 100%;
|
|
|
height: 280px;
|
|
|
object-fit: cover;
|
|
|
+ object-position: center;
|
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+.blog-card-image-container {
|
|
|
+ width: 100%;
|
|
|
+ height: 280px;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
+}
|
|
|
+
|
|
|
+.blog-card-image-container img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ object-position: center;
|
|
|
+ transition: transform 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.blog-card:hover .blog-card-image-container img {
|
|
|
+ transform: scale(1.05);
|
|
|
}
|
|
|
|
|
|
.blog-card-content {
|
|
|
@@ -100,7 +122,8 @@
|
|
|
|
|
|
/* Responsive */
|
|
|
@media (max-width: 768px) {
|
|
|
- .blog-card-image {
|
|
|
+ .blog-card-image,
|
|
|
+ .blog-card-image-container {
|
|
|
height: 200px;
|
|
|
}
|
|
|
|
|
|
@@ -119,7 +142,9 @@
|
|
|
<article class="blog-card">
|
|
|
<a href="{% url 'blog_play' item.b_titre_slugify %}" class="text-decoration-none">
|
|
|
{% if item.b_description_img %}
|
|
|
- <img src="{{item.b_description_img}}" alt="{{item.b_titre}}" class="blog-card-image">
|
|
|
+ <div class="blog-card-image-container">
|
|
|
+ <img src="{{item.b_description_img}}" alt="{{item.b_titre}}">
|
|
|
+ </div>
|
|
|
{% else %}
|
|
|
<div class="blog-card-image d-flex align-items-center justify-content-center">
|
|
|
<h3 class="text-white text-center px-4">{{item.b_titre}}</h3>
|
