Merge pull request #59 from enflujo/perezoso-lindo

🚧 Perezoso lindo
enflujo · Sep 18, 2024 · bd523a6 · bd523a6
2 parents 1299b54 + 6142679
commit bd523a6
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 1 deletion.
diff --git a/src/componentes/FiltroSVG.astro b/src/componentes/FiltroSVG.astro
@@ -0,0 +1,19 @@
+<svg class="cajaFiltroSVG" x="0%" y="0%" width="0%" height="0%" color-interpolation-filters="sRGB">
+  <filter id="filtroSVG_colorEnFlujo">
+    <feColorMatrix
+      type="matrix"
+      values="1 0 0 0 0
+    1 0 0 0 0
+    1 0 0 0 0
+    0 0 0 1 0"
+      in="SourceGraphic"
+      result="colormatrix"></feColorMatrix>
+    <feComponentTransfer in="colormatrix" result="componentTransfer">
+      <feFuncR type="table" tableValues="0.34 1"></feFuncR>
+      <feFuncG type="table" tableValues="0.34 1"></feFuncG>
+      <feFuncB type="table" tableValues="0.97 1"></feFuncB>
+      <feFuncA type="table" tableValues="0 1"></feFuncA>
+    </feComponentTransfer>
+    <feBlend mode="lighten" in="componentTransfer" in2="SourceGraphic" result="blend"></feBlend>
+  </filter>
+</svg>
diff --git a/src/componentes/Tarjeta.astro b/src/componentes/Tarjeta.astro
@@ -1,5 +1,6 @@
 ---
 import { urlImagen } from '@/utilidades/ayudas';
+import FiltroSVG from './FiltroSVG.astro';
 const { datos, imagen, coleccion } = Astro.props;
 const dimsImg = { ancho: '630', alto: '350' };
 ---
@@ -41,10 +42,12 @@ const dimsImg = { ancho: '630', alto: '350' };
 
     <slot />
   </section>
+  <FiltroSVG />
 </div>
 
 <style lang="scss" is:global>
   @import '@/scss/_constantes.scss';
+
   .tarjeta {
     display: flex;
     flex-direction: column;
@@ -55,6 +58,12 @@ const dimsImg = { ancho: '630', alto: '350' };
         line-height: 0;
       }
 
+      .perezoso {
+        &:hover {
+          filter: url(#filtroSVG_colorEnFlujo);
+        }
+      }
+
       img {
         height: auto;
         width: 100%;

diff --git a/src/scss/estilosGlobales.scss b/src/scss/estilosGlobales.scss
@@ -69,7 +69,6 @@ h3 {
 .contenedorTarjetas {
   display: flex;
   flex-direction: row;
-  align-items: center;
   flex-wrap: wrap;
   justify-content: space-around;
 }