iT邦幫忙

2021 iThome 鐵人賽
DAY 5
1
Modern Web

這個網站也太嗨！30 個網頁動態提案系列 第 6 篇

#4-圖片資訊藏起來！(Hover圖片&CSS Filter, Rotation)

13th鐵人賽 css scss
6013 瀏覽

  • 分享至 

  • xImage
    •  

前幾天都比較專注在文字上的CSS動態，今天就來看看圖片的吧！
比起一堆文字，放圖片絕對能夠說個好故事！
可是一張圖片不夠說明怎麼辦？那就在使用者Hover的時候才把資訊顯示出來吧！
不管是攝影師的圖片作品牆、還是部落格文章列表，加上Hover動態特效，
讓圖片活起來！

先來看看成果：

顯示更多資訊 資訊轉出來！ 就是...裝飾的線匡

我讓所有的img-container都有共同的設定：

.img-container{
    width: 200px;
    height: 300px;
    margin-right: 20px;
    margin-bottom: 20px;
    transition: 0.5s;
    cursor: pointer;   
    overflow: hidden;
}

提案1: 顯示更多資訊！（模糊＋文字效果）

圖片Hover後從模糊→清晰，吊吊使用者胃口！
只有當使用者跟圖片互動時，才能看到圖片清晰的原貌～
使用CSS Filter的功能。

＊hover 前：1.圖片模糊 2.標題不動 3.敘述透明 4.讓文字背景的黑色（偽元素）在下方待命
＊hover 後：1.圖片模糊變清晰 2.標題往上移動 3.敘述出現&往上移 4.讓文字背景的黑色上移動

//html
<div class="img-container img-container__1" 
data-title="Water" 
data-des="The origin of everything. Be like the flow.">
//懶得做元素，直接把文字塞到html裡面

    <div class="img" ></div>
</div>

//Scss
//&的SCSS意思是同一層！SCSS也可以這樣使用在class名稱
//所以下面我其實是外層包著.img-container{}
//這樣就等於img-container__1

&__1{
      background
      :url('https://source.unsplash.com/random/640x960?sea');
			//用unsplash 的random 圖片
      background-size: 100%;
      background-position: center;
      position: relative;
      
      &:before{
        content:attr(data-title);
				//讀取元素裡面的文字
        text-shadow: 1px 1px 20px black;
				//背景有時候太亮，文字看不到，我下點陰影，
				//但在第三個數值裡面設定讓他發散一點，陰影才不會太重

        position: absolute;
        bottom: 10px;
        left: 10px;
        z-index: 1;
        transition: .5s;
     }
      
      &:after{
        content:attr(data-des);
				//讀取元素裡面的文字
        text-shadow: 1px 1px 20px black;
        position: absolute;
        bottom: 10px;
        left: 10px;
        font-size: 12px;
        transform: translate(0, 40px);
				//先讓文字往下移動
        opacity: 0;
				//先讓文字消失
        z-index: 1;
        transition: .5s;
     }
      
      .img{
        @extend .img-container__1;
				//這是SCSS的用法，意思是我要.img-container__1裡面的設定
        width: 100%;
        height: 100%;
        filter: blur(1px);
				//先模糊，這邊因為外面還有包一層，才不會連邊界都糊糊的
        transition: .5s;
        position:relative;
				
				//這一塊就是文字hover後出現的黑幕！
        &:before{
          content:'';
          position:absolute;
          top:100%;
					//讓他往下移動，因為最外層有設定 overflow: hidden所以看不到
          left:0;
          width: 100%;
          height: 100%;
          transition: .5s;
          background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.8) 80%);
					//就是一個漸層：透明->黑色
          opacity: .5;
        }
        
        
      }
      
			//Hover開始！
      &:hover{
        &:before{
            bottom: 40px; //這個是標題，讓他往上移動=離底部遠一點
          }
        &:after{
          transform: translate(0, 0px);
          opacity: 1;
					//這個是敘述，讓敘述歸回原位，opacity =1 出現
        }
        .img{
        background-size: 105%; //讓圖片有點放大效果
        filter: blur(0);//讓圖片不模糊
          
          &:before{
            top: 0%; //讓字後面的黑幕整個蓋住圖片
          }
        }
      }
    }

因為其他效果很多，所以模糊的尺度不太明顯。
Filter還有很多參數可以玩，大家也可以試試看～

提案2: 卡片翻轉效果

超簡單的圖片效果，只要用css的rotate就可以做到，看起來很俏皮～

http://www.giphy.com/gifs/FKTBfNNvwwy29GD3BK

//html
<div class="img-container img-container__3">
    <div class="text">
      <span>Universe</span>
      <p>You are your own universe. Explore yourself now.</p>
    </div>
  </div>
</div>

//scss
&__3{
      background
      :url('https://source.unsplash.com/random/640x960?universe');
      background-size: 100%;
      background-position: center;
      display: flex;
      justify-content: center;
      align-items: center;

      .text{
        width: 80%;
        text-align: center;
        background: rgba(34, 49, 63, .6);
        padding: 10px 0;
        transform: rotateX(-90deg); 
				//主要是動這邊, 相當於rotate3d(1, 0, 0, -90).
        transform-origin: 50% 50%;
        transition: 0.5s;
        opacity: 0;

        p{
          font-size: 14px;
        }
      }

      &:hover{
        .text{
          transform: rotateX(0deg); //轉出來！
          opacity: 0.8;
        }
      }
    }
  }

提案3: 線框效果

Day1 有做過連結的文字底線效果，傳送門
這次一樣用scale來做四方方的線框效果！

＊hover 前：1. 背景綠色 2. 圖片透明度0 3.左右邊框透明，在y=0的地方待命 4. 上下邊框透明，在x=0的地方待命
＊hover 後：1. 背景不動啦 2. 圖片變微透明 3.左右邊框出現！往上下長 4. 上下邊框出現，往左右長

最底層其實是一個綠綠的東西，hover時候，
上面的圖片讓他透明一點就會有綠色濾鏡效果囉！
這邊的線框其實只需要兩個偽元素就作成！
一個比較扁，一個比較長，就會有交叉的曲線。

//html
<div class="img-container img-container__2">
    <img src="https://source.unsplash.com/random/640x960?woods" alt="">
    <div class="text">Woods</div>
</div>

//scss
&__2{
      background: #234F1E;//綠底壓在最下面
      background-size: 100%;
      background-position: center;
      position: relative;
        
        &:before, &:after{
          content:'';
          position:absolute;
          transition: all .5s ease-in;
        }
				
				//扁的線框，所以是上下的線！用border做
        &:before{
          width: 80%;
          height: 60%;
          left: 10%; //讓他左右置中 [(1 - 80%)/2]
          top:20%; //讓他上下置中 [(1 - 60%)/2]
          border-top: 1px solid transparent;
          border-bottom: 1px solid transparent;
					//先讓線是透明的
          transform: scale(0,1);
					//先讓x座標是0, 之後變成1就會左右長出來～
					//y座標還是要先設定，不然會變成從最中間長出來，不信你可以試試看
        }
      
				//細長的線框，所以是左右的線！用border做
        &:after{
          width: 60%;
          height: 80%;
          left: 20%;
          top:10%;
          border-right: 1px solid transparent;
          border-left: 1px solid transparent;
          transform: scale(1,0);   
					//先讓y座標是0, 之後變成1就會上下長出來～
        }
      
			//範例的蘑菇圖
      img{
        width: 100%;
        height: 100%;
        opacity: 1;
        transition: .5s;
      }
      
      .text{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
				//讓x,y軸移回自己身體的一半=置中
        opacity: .5;
        transition: opacity .5s ease-in;
      }

			//Hover!      
      &:hover{
        &:before{
          border-top: 1px solid white;
          border-bottom: 1px solid white;
          transform: scale(1,1);       
        }
        &:after{
          border-right: 1px solid white;
          border-left: 1px solid white;
          transform: scale(1,1);   
        }
        
        img{
           opacity: .7;
        }
        
        .text{
          opacity: 1;
        }
      }
      
    }

以上！

今天的code
主要是參考codepen這裡:CodePen Home
Awesome Image Hover in Pure CSS
另外也很喜歡這個效果，適合活潑的品牌～有機會再試試看!
這些動態都不難，但能夠設計出來真的不簡單～

有任何錯誤或意見請批評指教
/images/emoticon/emoticon37.gif


上一篇
#3-打字特效炫起來！(CSS Animation)
下一篇
#5-中秋月亮暈起來！不規則Blob球球(CSS)
系列文
這個網站也太嗨！30 個網頁動態提案 共 33 篇
  1. 29
    #26-圓餅圖動起來！玩轉D3.js漸變功能Transition+Interpolate
  2. 30
    #27-微互動折線圖動態！就是要比較才看得出結果啊 (D3.js)
  3. 31
    #28- D3.js 地圖動起來!用SVG viewbox/D3 fitExtent讓地圖置中
  4. 32
    #29-網站Tips動起來!用Tailwind自訂動畫&Hover動畫～
  5. 33
    #30-用Tailwind&Gulp做個動態菜單網站(完賽!)
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
金金
iT邦新手 1 級 ‧ 2021-09-20 20:51:28

讚唷！酷酷的～

Global Rachel iT邦新手 3 級 ‧ 2021-09-21 14:44:45 檢舉

耶！謝謝金金～你的D3教學文才比較猛！我是忠實讀者！

登入發表回應

我要留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22195 篇
完賽人數
600 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙