Text overlay over image on hover. How to stop other divs from moving


Tags: jquery,html,css

Problem :

How do i create a text overlay for my image on hover.

Also how do i stop all my other divs from moving when i mouse over my image. Like everything on my page shifts slightly. I want nothing else on my page to move, just have the overlay appear on hover. Any help is greatly appreciated.
Fiddle makes more sense. (Open JS box to max so you can see what i'm talking about)

HTML:

<div class='wrapper'>       
    <div id = 'portfolioContainer'> 
        <ul id='portfolioGallery'> 
            <li> 
                <a href="" target="_blank">
                    <img src= "" class='gallImage'>
                    <div class='gallText'> HTML CSS Javascript </div> 
                </a>
            </li>   
            <li> 
                <a href="" target="_blank">
                    <img src= "" class='gallImage'>
                    <div class='gallText'> HTML CSS(Sass) Javascript </div> 
                </a>
            </li>   
            <li> 
                <a href="" target="_blank">
                    <img src= "" class='gallImage' >
                    <div class='gallText'> HTML CSS Javascript </div>
                </a>
            </li>   
        </ul>
    </div>
</div>

JS:

$('.gallText').hide();

$('.gallImage').mouseover(function(){
    $(this).css('opacity','.2');
    $(this).next('div.gallText').show();
}).mouseout(function(){
    $(this).css('opacity','1');
    $(this).next('div.gallText').hide(); 
});

CSS:

#portfolioGallery {
    list-style:none;
    text-align: center;
}

#portfolioGallery li {
    display:inline-block;
    padding: 20px 20px;
}

#portfolioGallery img {
     border:3px solid #021a40;
     width: 350px;
     height: 200px;
    background:#D4CFC7;

}


Solution :

One solution is to use visibility: hidden/visibility: visible instead of display: none; and display: block. Visibility:hidden means that unlike display:none, the element is not visible, but space is allocated for it on the page. so for example:

$('.gallText').css("visibility", "hidden");

$('.gallImage').mouseover(function() {
  $(this).css('opacity', '.2');
  $(this).next('div.gallText').css("visibility", "visible");
}).mouseout(function() {
  $(this).css('opacity', '1');
  $(this).next('div.gallText').css("visibility", "hidden");
});
#portfolioGallery {
  list-style: none;
  text-align: center;
}
#portfolioGallery li {
  display: inline-block;
  padding: 20px 20px;
}
#portfolioGallery img {
  border: 3px solid #021a40;
  width: 350px;
  height: 200px;
  background: #D4CFC7;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='wrapper'>

  <div id='portfolioContainer'>
    <ul id='portfolioGallery'>
      <li>
        <a href="" target="_blank">
          <img src="" class='gallImage'>
          <div class='gallText'>HTML CSS Javascript</div>
        </a>
      </li>
      <li>
        <a href="" target="_blank">
          <img src="" class='gallImage'>
          <div class='gallText'>HTML CSS(Sass) Javascript</div>
        </a>
      </li>
      <li>
        <a href="" target="_blank">
          <img src="" class='gallImage'>
          <div class='gallText'>HTML CSS Javascript</div>
        </a>
      </li>

    </ul>
  </div>

</div>


    CSS Howto..

    How can I align a div at the edge of a div above it when said div is using automatic positioning?

    How to make header cover entire page length?

    How to write CSS for parent DIV needing height dictated by child DIVs that are also anchored bottom?

    I'm am trying to have a responsive navigation bar for small screens, how can I change the left links to a css drop-down menu?

    How to create the timetabling with div properly?

    How to float images left and right without text wraps

    How to get 2 fixed and 1 dynamic column in CSS

    how to avoid from loading unnecessary javascript and css in page on codeigniter to improve the load time [closed]

    How to fix error css width x height when run as mobile

    How to write a responsive semantic HTML5 page ? (With a framework ?)

    Showing play button and time on each image

    How to split multiple string using jQuery or javascript?

    How can I set a “bounding” area for my drag-able object in javascript?

    How to avoid overlapping text using CSS?

    How can a user add content to a website? [closed]

    How to enter PHP data into

    How to prevent divs from overlapping?

    How to wrap image around the long text?

    How to center the buttons and make them same size

    How do I scrape the table from a website (link provided) using CSS? [closed]

    How to change comma separated css values with Jquery.css Method?

    How to change the color of the text next to an input field in an HTML form?

    How to make CSS columns in a div?

    How to center bootstrap navba-nav on scroll when fixed?

    css how to stretch center div to fill allowable area

    How to silently hide “Image not found” icon when src source image is not found

    How do I apply CSS styling to a
    block?

    How to create a responsive top bar with CSS

    HTML/CSS/JAVASCRIPT : How to move an element and not show scrollbars

    How well do you need to know HTML before delving into CSS?