SCSS overlay display none is still displaying

css display: none
css hide element and remove space
css show hide div on click
display:none not working
css hide element on specific page
css visibility
css hide specific text
class display: none

Working on a portfolio site while using SASS-

I want my project title to show up at the bottom of the image on hover.

I haven't tried the hover yet, but I would appreciate help with it if it's possible!

HTML:

<div class="projects">
      <div class="item">
      <img src="img/projects/project1.jpg" alt="Project">
      <div class="overlay">TRACKFIT</div>
      <a href="#!" class="btn-dark">
        <i class="fab fa-behance"></i>
      </a>
      </div>

CSS:

.projects {
  display: grid;
  grid-gap: 0.7rem;
  grid-template-columns: repeat(3, 1fr);

  img {
    width: 100%;
    border: 3px #fff solid;

    &.overlay {
      display: none;
    }

    &:hover {
      opactiy: 0.5;
      border-color: $secondary-color;
      @include easeOut;
    }
  }
}

The "TRACKFIT" text it still displaying beneath the image, regardless of the overlay display:none

Many thanks in advance!

https://jsfiddle.net/kendra_chu/19qte5rh/4/

.projects{
  display: grid;
  grid-gap: 0.7rem;
  grid-template-columns: repeat(3, 1fr);
  .item{
     img{
          width: 100px;
          border: 3px #fff solid;   
          position: absolute
      }
       .title{
          display: none;
          position: relative /*text will appear on top of image*/
       }
      img:hover{
          opactiy: 0.5;
          border-color: #000;
      }
      img:hover + .title { /*display the tile when hover over the image*/
        display: block;
      }

  }
}

HTML

<div class="projects">
    <div class="item">
        <img src="https://picsum.photos/500/290/?random" alt="Project">
        <div class="title">TITLE</div>
        <a href="#!" class="btn-dark">
          <i class="fab fa-behance"></i>
        </a>
    </div>
</div>

html - SCSS overlay display none is still displaying, https://jsfiddle.net/kendra_chu/19qte5rh/4/ .projects{ display: grid; grid-gap: 0.7​rem; grid-template-columns: repeat(3, 1fr); .item{ img{ width:  But things get a little tricker with JS libraries that apply their own CSS. For instance in jQuery, after you .slideUp(), you'll have a display: none in the inline CSS to deal with. Yes, screen readers run JavaScript and yes, that's still a problem.

You have an errant & selector before your .overlay in your SCSS. If you remove that, your code will at least hide the overlay.

Also consider closing the <div id="projects"> tag in your HTML, it is still open.

You'd also likely want to target hovering the .item since the .overlay is a child of that and can be easily selected.

See codepen here.

How to hide an HTML element, but still have it take up space in the , , even though the HTML for it is still in the source code. # Visible. If you don't set the overflow property at all, the default is visible. So in general, there is no reason to explicitly set this property to visible unless you are over-riding it from being set elsewhere. The important thing to remember here is that even though the content is visible outside of the box,

You can put the .item in the relative position and the .overlay in the absolute position, after that you put it out off the visible space by moving it 100%(which is exactly the height of their parent .item element) from top. and when you put you mouse hover the image, the .overlay is moved by modifing their margin negatively from top.

.project {
    .item {
        position: relative;
        overflow: hidden;
        img {
            width: 100%;
            &:hover {
                & ~ .overlay {
                    margin-top: -100px;
                }
            }
        }
        .overlay {
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            height: 100px;
            transition: all 3s easy-in-out; // just to make it smoothly
        }

    }
}

CSS - does display: none still load the div?, to interact with, but no longer has space reserved for it (unlike visibility: hidden or opacity: 0). Set the wrapper to display none on the breakpoint where you dont want to load the image. The inline css of the img tag is now ignored since the style of an element wrapped in a wrapper with display none will be ignored, therefore the image is not loaded, until you reach a breakpoint where the wrapper has display block.

Performance differences between visibility:hidden and display:none , ; elements are not in the render tree all, so they will perform better at face value. If you are toggling between visible and invisible states via javascript then visibility:hidden should be the better performer. display: none; It will not be available on the page and does not occupy any space. visibility: hidden; it hides an element, but it will still take up the same space as before. The element will be hidden, but still, affect the layout. visibility: hidden preserve the space, whereas display: none doesn't preserve the space.

What is the difference between visibility:hidden and display:none , What is the difference between visibility hidden and display none? Teams. Q&A for Work. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information.

10 Ways to Hide Elements in CSS, , the tag is not visible, but space is allocated for it on the page. Note that while the element is still in the DOM, it is removed visually and any other conceivable way (you can’t tab to it or its children, it is ignored by screen readers, etc). Table Values. There is a whole set of display values that force non-table elements to behave like table elements, if you need that to happen.

Comments
  • You select img with a class overlay, which doesn't exist in your HTML. You should remove & in front of .overlay and move it outside img {}
  • Thank you Kendra :) I'm trying to get the text to appear on the image though, like an overlay on a low opacity black rectangle.
  • @BellaWella In that case, you can simply add position: relative to the .title class and position: absolute to the img, then you can modify its position however you want. The text will appear on top of the image on hover.
  • Ah ! Cool! However, now all my images are very very small and it looks like the structure of the text, bar, and image have been lost somewhere? Any ideas? Here's my current screen: tinypic.com/r/zxntac/9
  • I don't see your pic but my codes were a sample that is very similar to yours and I set the image to 100px to test. Please modify it properly for your project.
  • That helped, but when I add position: absolute to the img, everything is huge - it looses the size constraints entirely. I've bene trying to work on it with your code for an hour and I don't know the problem!
  • Hi! Do you know if it's possible to do something more like this idix.fr/references I changed my css to mirror yours but the caption is actually no where near the image
  • Did it work like you want? jsfiddle.net/yvesdaxmaz/qo93mx7n/5 here the red color is changing smoothly
  • Hey Yves! Almost ! How can I make it so the red goes over the entire image? You're amazing !
  • In the second link the red color cover the entire image