finalizacion de las cards

css/infantil.css

@@ -42,4 +42,14 @@ body {
 
 .card-shadow {
   box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.6);
+}
+.card:hover {
+  transform: scale(1.1);
+
+  transition: transform 0.3s;
+}
+
+
+.card {
+  transition: transform 0.3s;
 }

educacioninfantil.html

@@ -23,6 +23,8 @@
     <link rel="stylesheet" href="/css/infantil.css" />
     <script defer src="js/bootstrap.bundle.js"></script>
     <script defer src="js/hidden.js"></script>
+    <script defer src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
+    <script defer src="js/infantil.js"></script>
     <title>Educacion Infantil</title>
   </head>
 

js/infantil.js

@@ -0,0 +1,11 @@
+  $(document).ready(function () {
+    // Aplica el efecto de agrandamiento al hacer hover en las tarjetas con la clase .card
+    $('.card').hover(
+      function () {
+        $(this).css('transform', 'scale(1.1)');
+      },
+      function () {
+        $(this).css('transform', 'scale(1)');
+      }
+    );
+  });