DIVI theme 圖片增加CSS語法,游標移到圖片出現浮動字串

在圖片image module設定,由Custom CSS處加入以下語法:

Before

content:”CONCEPT DEVELOPMENT”;

position:absolute;

top:85%;

left:50%;

z-index:99;

transform:translate(-50%,-50%);

color:#fff;

font-size: 16px;

line-height:26px;

font-weight:bold;

width:90%;

background:rgba(145,18,46,0.95);

text-align:center;

padding:5px;

transition-duration:1s;


After

 

content:”Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit imperdiet facilisis. Suspendisse consectetur dolor sed urna finibus, quis consectetur lorem dapibus.”;

position:absolute;

top:50%;

left:50%;

z-index:99;

transform:translate(-50%,-50%);

color:#fff;

font-size: 16px;

line-height:18px;

width:80%;

background:rgba(130,107,41,0.7);

padding:20px;

text-align:center;

opacity:0;

transition-duration:1s;


最後在Hover部分Before設定( opacity:0; )與After的  與( opacity:1; )即可

0 Comments

Submit a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

one × 5 =

Written By: Dee

最新文章

近期留言

聯絡:06-2080-255
service@wallsweet.com.tw

アクセスカウンター