How to turn off image overlays for mobile phone (CSS)

Question

I am a student trying to turn off the image overlays when my site is a mobile size. When you hover over images at 1280px, there's text. Instead of the image overlays, I want paragraphs to show up when in mobile view. The problem is, the paragraphs show up at full screen laptop width and not mobile view. In my html I have included a under each container for the mobile view paragraphs.

My HTML:

<section class="flex-container"> 

<div class="containertwo">    
    <img src="../assets/Lifestylewriting.png" alt="Avatar" class="image"> <p class="description"> LIFESTYLE WRITING </p>
  <div class="overlaytwo">
    <div class="portfolioText">I wrote this article about being able to spend time with yourself.</div> 
  </div>
    </div>
    <p class="responsiveportfolioText"> I wrote this article about being able to spend time with yourself. </p>
</section>

.container,.containerthree {
 
position: relative;
  
width: 23%;

}
.overlay {
  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  height: 90%;

  width: 100%;

  opacity: 0;

  transition: .5s ease;

  background-color: beige;
}

.container:hover .overlay {
  opacity: 1;

.responsiveflex-container{

    display:none;

    visibility:hidden;

}

.responsiveportfolioText{

visibility:hidden;

display:none;

color:white;
}


@media screen and (max-width: 450px)

.portfolioText{

visibility:  hidden;
}
    
    .overlay, .overlaytwo, .overlayfour, .overlaythree{
        visibility: hidden; 
    }
.containertwo:hover .overlaytwo, .container:hover .overlay , .containerfour:hover .overlayfour{
    
opacity:0;

visibility: hidden;

.responsiveportfolioText{

        visibility: visible;

        text-align:left;

        font-size: .5em;

        font-weight:400;

        display: flex;

        color:black;
}

.responsiveflex-container{

    display: flex;

    visibility:visible;
}

.portfolioText{

visibility:  hidden;

}
    

Answer 1

.container,.containerthree {
 
position: relative;
  
width: 23%;

}
.overlay {
  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  height: 90%;

  width: 100%;

  opacity: 0;

  transition: .5s ease;

  background-color: beige;
}

.container:hover .overlay {
  opacity: 1;

.responsiveflex-container{

    display:none;

    visibility:hidden;

}

.responsiveportfolioText{

visibility:hidden;

display:none;

color:white;
}


@media screen and (max-width: 450px){

.portfolioText{

display:  none;
}
    
    .overlay, .overlaytwo, .overlayfour, .overlaythree{
        visibility: hidden; 
    }
.containertwo:hover .overlaytwo, .container:hover .overlay , .containerfour:hover .overlayfour{
    
opacity:0;

display: none;}

.responsiveportfolioText{

        display: none;

        text-align:left;

        font-size: .5em;

        font-weight:400;

        display: flex;

        color:black;
}

.responsiveflex-container{

    display: flex;

    visibility:visible;
}

   
    
}

you didn't wrap media query styling in a curly brace plus display:none is preferable to visibility:hidden. you can copy paste my code or look closely for the edit.

Answer 2

@media screen and (max-width: 450px)

.portfolioText{

visibility:  hidden;
}
    
    .overlay, .overlaytwo, .overlayfour, .overlaythree{
        visibility: hidden; 
    }
.containertwo:hover .overlaytwo, .container:hover .overlay , .containerfour:hover .overlayfour{
    
opacity:0;

visibility: hidden;

.responsiveportfolioText{

        visibility: visible;

        text-align:left;

        font-size: .5em;

        font-weight:400;

        display: flex;

        color:black;
}

.responsiveflex-container{

    display: flex;

    visibility:visible;
}

.portfolioText{

visibility:  hidden;

}

If you want to hide something use display: none instead visibility: hidden, then you can hide it. You also missing some {} marks be careful with them. I need close tags also, not just starting tag.