Наведите текст над изображением сообщения на mouseover

Question

Я работаю над перепроектированием блога в wordpress с использованием системы Genesis. Это, наверное, самая простая вещь, но я не могу найти хорошее решение.

В блоге есть домашняя страница, на которой показаны выдержки из выписок с изображениями. Изображения ссылаются на полный пост (это не изображение). Я хочу, чтобы текст «читать больше» отображался на изображении сообщения при наведении курсора мыши и что он ссылается на полный пост. Я нашел эти эффекты для изображений, которые вы добавляете вручную с помощью html, но как вы добавляете эти эффекты только для почтовых изображений?

В идеале я хотел бы полюбить один из удивительных эффектов зависания, сделанных codrops (демо здесь: http://tympanus.net/Development/HoverEffectIdeas/index.html), особенно Bubba.

Но прямо сейчас я искал решение для этого так долго, что я собираюсь взять то, что получаю.

С наилучшими пожеланиями, фрагмент

figure.effect-bubba { 
    background: #9e5406; 
} 

figure.effect-bubba img { 
    opacity: 0.7; 
    -webkit-transition: opacity 0.35s; 
    transition: opacity 0.35s; 
} 

figure.effect-bubba:hover img { 
    opacity: 0.4; 
} 

figure.effect-bubba figcaption::before, 
figure.effect-bubba figcaption::after { 
    position: absolute; 
    top: 30px; 
    right: 30px; 
    bottom: 30px; 
    left: 30px; 
    content: ''; 
    opacity: 0; 
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; 
    transition: opacity 0.35s, transform 0.35s; 
} 

figure.effect-bubba figcaption::before { 
    border-top: 1px solid #fff; 
    border-bottom: 1px solid #fff; 
    -webkit-transform: scale(0,1); 
    transform: scale(0,1); 
} 

figure.effect-bubba figcaption::after { 
    border-right: 1px solid #fff; 
    border-left: 1px solid #fff; 
    -webkit-transform: scale(1,0); 
    transform: scale(1,0); 
} 

figure.effect-bubba h2 { 
    padding-top: 30%; 
    -webkit-transition: -webkit-transform 0.35s; 
    transition: transform 0.35s; 
    -webkit-transform: translate3d(0,-20px,0); 
    transform: translate3d(0,-20px,0); 
} 

figure.effect-bubba p { 
    padding: 20px 2.5em; 
    opacity: 0; 
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; 
    transition: opacity 0.35s, transform 0.35s; 
    -webkit-transform: translate3d(0,20px,0); 
    transform: translate3d(0,20px,0); 
} 

figure.effect-bubba:hover figcaption::before, 
figure.effect-bubba:hover figcaption::after { 
    opacity: 1; 
    -webkit-transform: scale(1); 
    transform: scale(1); 
} 

figure.effect-bubba:hover h2, 
figure.effect-bubba:hover p { 
    opacity: 1; 
    -webkit-transform: translate3d(0,0,0); 
    transform: translate3d(0,0,0); 
} 

Answer 1

1) просто скачать этот пример. 2) установить скрипт и стили в вашем каталоге js и css. 3) включить их в свой скрипт. 4) сравните изображение html с примерами изображений. 5) поместите классы и элементы, подобные образцам.

, и вы просто можете получить такой эффект.

обратите внимание, что это не только волшебство css, но и js также принимают участие в вашем эффекте Desiree.