<div class="ant">
	<img src="animate/animate.png" class="animg" />
	<div class="cnt"></div>
	<div class="txt">
		  <h3>資訊安全監控系統</h3>
		<h3>姓名:郭哲瑋</h3>
		<h3>學校:崑山科技大學</h3>
		<h3>科系:資訊傳播系</h3>
	</div>
</div>

藍色字依照自己的設定去寫。

類似像這樣:

1. 設定最外層的div
   • 先將ant這個標籤的div設定 寬 和 高。
   • 將寬(width)設定為20%。
   • 讓他顯示外框線(border)，方便查看(之後會拿掉)。
   CSS參考程式:

   .ant{
     width:20%;
     border:1px solid gray;
   }
   

   左邊會出現一個框，像這樣:

   
   
   
2. 將圖片(animg)依照左上角的尺寸做縮放
   • 將圖片的寬(width)設定為30%
   CSS參考程式:

   .animg{
   	width:30%;
   }
   

   

   這樣圖片就會依照外層div寬度的30%做縮放

1. 將外層的div (ant) 新增功能
   • 用 margin的功能讓整體版面置中
     (此功能只是方便我們觀看版面效果的狀況，非必要做)
   • 新增 position的 relative
   • 用text-align將div裡的內容都置中

   .ant{
         width:20%;
         border:1px solid gray;
   	  
   	****新增下面這幾行****
         text-align:center;
         position:relative;
         margin-left:auto;
         margin-right:auto;
         margin-top:50px;
      }
   

   
   
   
2. 讓圖片、其他元素以外層div(ant)為父元素做絕對路徑
   • div(cnt) 、 div(txt) 加上 position的absolute，高度(top)都是0px
   • 讓cnt的高度和寬度都設定為100%，背景色給他黑色，然後加上一點透明度。
   • 讓txt的寬度設定為100%，字體顏色是白色。
   • 可以將所有物件都加上不同顏色外框線(border)方便查看，之後再拿掉就好
   CSS參考程式:
   div(cnt):

   .cnt{
         position:absolute;
         top:0px;
         height:100%;
         width:100%;
         background-color:black;
         opacity:0.5;
         border:2px solid blue; (完成後會拿掉)
      }
   

   div(txt):

   .txt{
         position:absolute;
         top:0px;
         width:100%;
         color:white;
         border:2px solid green; (完成後會拿掉)
      }
   

   完成後會像這樣:

1. 建立動畫特效
   • 建立一個名為imgeft的動畫特效(@keyframes)
   • 開始狀態圖片大小不變
   • 結束狀態圖片縮小0.75倍
   CSS參考:

   @keyframes imgeft {
        from{transform:scale(1,1);}
        to  {transform:scale(0.75,0.75);}
     }
   

2. 當滑鼠滑到外層div(ant)時會讓圖片(animg)有上面的動畫效果
   • 新增一個css標籤是當滑鼠滑入ant這個div時，讓txt這個div區塊執行animation
   CSS參考:

    .ant:hover .animg{
         animation-name:imgeft;
         animation-duration:0.5s;
         animation-iteration-count:1;
         animation-fill-mode:forwards;
      }
   

1. 將cnt這個黑色div不要出現在網頁上
   • 在cnt的style設定中scale讓區塊縮到最小
   CSS參考:

   .cnt{
         position:absolute;
         top:0px;
         height:100%;
         width:100%;
         background-color:black;
         opacity:0.5;
         border:2px solid blue;
   	  
   	****新增這一行****
         transform:scale(0,0);
      }
   

2. 建立動畫特效
   • 建立一個名叫cnteft的動畫特效
   • 開始狀態區塊大小縮到最小
   • 結束狀態區塊放大到原本大小
   CSS參考:

    @keyframes cnteft{
         from{transform:scale(0,0);}
         to  {transform:scale(1,1);}
      }
   

3. 當滑鼠滑到外層div(ant)時會讓cnt這個div有展開效果
   • 新增一個css標籤是當滑鼠滑入ant這個div時，讓cnt這個div區塊執行animation
   CSS參考:

   .ant:hover .cnt{
         animation-name:cnteft;
         animation-duration:0.5s;
         animation-iteration-count:1;
         animation-fill-mode:forwards;
      }
   

1. • 在txt的style設定中scale讓區塊縮到最小
   CSS參考:

    .txt{
         position:absolute;
         top:0px;
         width:100%;
         color:white;
         border:2px solid green;
   	  
   	****新增這一行**** 
         transform:scale(0,0);
      }
   

2. 建立動畫特效
   • 建立一個名叫txtef的動畫特效
   • 開始狀態區塊大小縮到最小
   • 結束狀態區塊放大到原本大小
   CSS參考:

   @keyframes txtef{
      from{transform:scale(0,0);}
      to  {transform:scale(1,1);}
   }
   

3. • 新增一個css標籤是當滑鼠滑入ant這個div時，讓txt這個div區塊執行animation
   CSS參考:

   .ant:hover .txt{
        animation-name:txtef;
        animation-duration:0.5s;
        animation-iteration-count:1;
        animation-fill-mode:forwards;
     }