DeemStarr DeemStarr - 6 months ago 17
jQuery Question

How to display text on hover without moving content on page?

So, I am trying to display some content when the mouse hovers over a photo. However, I am having a hard time doing this without moving the rest of the content on the page (below).

How would I implement a solution to display the content right under the top 3 images without using

margin-top: -22%
?

Here is a link to the site

.eCommerce{
margin-left: 7%;
}

.photo1-content{
display: none;
}

.photo1:hover .photo1-content{
display: block;
margin-top: -22%;
margin-left: 13%;
}

.photo2-content{
display: none;
}

.photo2:hover .photo2-content{
display: block;
margin-top: -22%;
margin-left: 44%;
}

.photo3-content{
display: none;
}

.photo3:hover .photo3-content{
display: block;
margin-top: -22%;
margin-left: 75%;
}

.photo4-content{
display: none;
}

.photo4:hover .photo4-content{
display: block;
margin-top: -1%;
margin-left: 13%;
}

.photo5-content{
display: none;
}

.photo5:hover .photo5-content{
display: block;
margin-top: -1%;
margin-left: 44%;
}

.photo6-content{
display: none;
}

.photo6:hover .photo6-content{
display: block;
margin-top: -1%;
margin-left: 75%;
}

.enterprise{
position: static;
}

Answer

Michael_B is correct about display: none. The element is not in the flow of your DOM until it becomes displayed. As it sounds like you've discovered, different browsers handle the visibility property differently.

If what you are trying to do is merely display the text under the photos on hover without having the surrounding content "bounce", a really easy trick is to put the text in the flow of the document wherever you want it to be displayed and style it with color: transparent.

So, without being able to see your HTML and based solely on your provided code, a possible solution would look like this:

.photo1-content{
    color: transparent;
}

.photo1:hover .photo1-content{
    color: black;
}

Hope this helps!