Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Pop up on hover functionality for text content WordPress

  • SOLVED

Hi Guys

I want to replicate something similar to this on a Wordpress site I am developing

http://screencast.com/t/1ymrwNpp1y

This is the site with the functionality I want to replicate (scroll down to treatments)

http://us.caudalie.com/spas-boutiques/spas-vinotherapie/spa-usa/the-plaza-new-york.html#the-treatment-menu

What is the best way for me to do that in Wordpress? Would Easy Fancy Box do it?

Thanks
Steve

Answers (3)

2013-05-16

Daniel Yoen answers:

Hello, try this :

html structure :

<div class="client-box">
<h1>A Quinta da Auga</h1>
<div class="content">
<p>Sample Content | Our clients are our business partners. Their success is ours.</p><p>See for yourself: browse through some of our work for big and small brands</p>
</div>
</div>


css:

.content {
display: none!important;
padding: 0 18px;
background: #FFF;
z-index: 9999;
position: relative!important;
border: 1px solid #649Ba1;
border-top: none;
left: -1px;
width: 154px;
-webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px;
}
.client-box:hover .content{
display:block!important;
}


hope this help :-)


Daniel Yoen comments:

Screenshot :-)