I am facing a minor issue with my design. My current skill set includes only CSS/HTML, and I want to incorporate some extra "wow factor" into one of my designs. To achieve this, I have been exploring jQuery snippets shared by others who have attempted similar enhancements. The problem arises when the text appears underneath when an item is hovered on - causing the other items in the list to move down, even though they all contain the same text. This peculiar behavior stems from the fact that the text is hidden until it's hovered upon, making it seem as if it doesn't exist.
These images should provide better clarity:
The two distinct states :
http://gyazo.com/6f736e7ef79409dbd3398facb03dcf5c.png
To clarify: it is the other boxes that shift downward, while the box with the acorn remains in its original position.
If you wish to view the code I used, you can do so here:
http://codepen.io/redhotfusion/pen/ipocE
Below is the relevant CSS:
.t_s_ul {
list-style-type:none;
width:90%;
padding-left:5px;
margin-left:-10px;
margin:0 auto;
}
.t_s_li {
width:70px;
height:70px;
border:4px white solid;
display:inline-block;
border-radius:5px;
margin:5px;
position:relative;
}
.t_s_li:hover{
transition:1s;
background-color:white;
}
.type_icon {
background:url("http://i.imgur.com/xix8EC9.png");
width:100%;
height:100%;
background-size:100%;
margin-left:-2px;
}
.type_icon:hover{
transition:1s;
cursor:pointer;
background:url("http://i.imgur.com/e1IONg2.png");
}
.course_type_text {
width:75px;
color:white;
font-size:0.85em;
margin:0 auto;
margin-top:0.5em;
margin-left:-0.15em;
font-family:"Open Sans" , arial;
font-weight:400;
The HTML markup:
<ul class="t_s_ul">
<li class="t_s_li">
<div class="type_icon"></div>
<DIV class="course_type_text">Course One</DIV>
</li>
<li class="t_s_li"></li>
<li class="t_s_li"></li>
<li class="t_s_li"></li>
</ul>
THE JS/JQUERY
$(function(){
$(".spire-menu").hover(function(){
$(this).find(".menu-item").fadeIn();
}
,function(){
$(this).find(".menu-item").fadeOut();
}
);
});
$(".spire-menu").on('mouseenter mouseleave', function () {
$(this).find('.box').fadeToggle(100);
});
Apologies if this seems like a beginner question, but we all have to start somewhere!
Any advice or assistance would be greatly appreciated!
Thank you,
-Valdis