Alexis Alexis - 5 months ago 8
jQuery Question

What kind of script do I need to have a hidden div emerge from 2 divs in the center pushing one up and one down on hover

What kind of script do I need to have a hidden div emerge from 2 divs in the center pushing one up and one down on hover? I am not the best with jquery so I am not sure what I need to be searching for in terms of code.

I currently have a hidden text where on hover over the title the text appears but it leaves a long blank space for the text even though its hidden. I then made the header div smaller but when you would hover over it the text that appeared would then display over my button.

What I'm looking to achieve (the 4 boxes of hover):

What I have:

https://jsfiddle.net/alexisdeals/7398hnbz/



#text {
visibility: hidden;
}
.content:hover #text {
visibility: visible;
}

<div id="test2" style="border:thin solid #aaa">
<div style="float: left; text-align: center;" id="one">
<div class="content" onMouseOver="show('text')" onMouseOut="hide('text')">
<h3><a title="First Aid/CPR" href="#" style="color:#212121!important; font-weight:900;">First Aid/CPR</a></h3>
<div>
<p style="float: left; text-align: center;" id="text">Learn skills to save a life and receive a two-year certificate that meets American Heart Association standards.</p>
</div>
</div>
</div>

<div id="button" style="text-align:center">LEARN MORE</div>
</div>




Answer

To get the effect you want from the website you gave I did some adjustments:

https://jsfiddle.net/ac0fh6qf/

I added vertical alignment for the content and some jQuery slide up/down for the animation. Also I removed the float:left; and the visibility:hidden; which I replaced by a display:none; which is more convenient.

Comments