javascript - jqueryの画像キャプションでアドバイスが必要

Question

http://www.zurb.com/expo

私は何年もの間、このようなキャプションを正確に探していました. しかし、そのキャプションの背景の不透明度が欲しいです。50%、ホバーすると 90%、半脈動のテキスト効果。それを手伝ってもらえますか？

Answer 1

ブラウザのサポートによっては、CSS アニメーション (例) を使用して実現できます。

h2 {
    background: rgba(0, 0, 0, 0.5);
}

.image:hover h2 {
    background: rgba(0, 0, 0, 0.8);
    -moz-animation: 2s ease 0s normal none infinite pulse;
    -webkit-animation: 2s ease 0s normal none infinite pulse;
}

@-moz-keyframes pulse {
  0% { color: #000 }
  50% { color: #FFF }
  100% { color: #000; }
}

@-webkit-keyframes pulse {
  0% { color: #000 }
  50% { color: #FFF }
  100% { color: #000; }
}

RGBA の代わりに古いブラウザのサポートが必要な場合は、アルファ透明度のある PNG 背景画像と、CSS アニメーションの代わりにjQuery animate()を使用してください。