0

I'm looking to have a div which shows just a h3 tag vertically aligned centre with a background image, which on hover shows a paragraph text block and button instead of the h3 element (so a straight swap) with a quick fade transition.

I can only see to find examples that swap on other elements.

Any ideas? Thanks!

<div class="col-lg-3">
 <h3>Service Name</h3>
 <p>This is the description of the service which explains what it's all about.</p>
 <a class="button">Read More</a>
</div>
dilby
  • 35
  • 8

1 Answers1

0

You can use CSS transition to give a fade effect. I tried to create something like you asked using just CSS. You can also add the show/hide with jquery. The transition css is from @Guillermo given here.

Check fiddle

Community
  • 1
  • 1
Tom
  • 1,779
  • 2
  • 15
  • 19