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; )即可