fix opacity

This commit is contained in:
Shing Hung 2025-01-04 17:01:45 -08:00
parent f80f489bf6
commit cb6838fe6b
2 changed files with 4 additions and 4 deletions

View file

@ -7,10 +7,10 @@ import { IoMdCalendar } from "react-icons/io";
import { RiRobot2Fill } from "react-icons/ri"; import { RiRobot2Fill } from "react-icons/ri";
const {image, text, link} = Astro.props; const {image, text, link} = Astro.props;
--- ---
<div class="w-[15vw] relative"> <div class="w-[15vw] relative group">
<img src={image} alt="involvement background" class="aspect-[230/425] object-cover rounded-[2vw]"/> <img src={image} alt="involvement background" class="aspect-[230/425] object-cover rounded-[2vw] group-hover:opacity-70 duration-300"/>
<Link href={link} className="group absolute top-0 w-[15vw] pt-[5%] aspect-[230/425] flex flex-col justify-between"> <Link href={link} className="absolute top-0 w-[15vw] pt-[5%] aspect-[230/425] flex flex-col justify-between">
<div class="w-full flex justify-end pr-[5%]"> <div class="w-full flex justify-end pr-[5%]">
<div class="bg-white w-fit rounded-full aspect-square p-[0.5vw] text-ieee-black text-[2vw]"> <div class="bg-white w-fit rounded-full aspect-square p-[0.5vw] text-ieee-black text-[2vw]">
{ {

View file

@ -2,7 +2,7 @@
import Involvement from "./Involvement.astro"; import Involvement from "./Involvement.astro";
import involve from "../../data/involve.json"; import involve from "../../data/involve.json";
--- ---
<div class="px-[8%] flex items-center mb-[10%]"> <div class="pl-[10%] pr-[6%] flex items-center mb-[10%]">
<div class="flex w-3/5 justify-between"> <div class="flex w-3/5 justify-between">
{involve.map((item)=>( {involve.map((item)=>(
<Involvement <Involvement