BoxNine7 portfolio draft

I've added an accordion to my webpage https://www.boxnine7.com/s-portfolio-draft but rather than word titles that expand I want there to be images that you click to expand to read the explanations. Is this possible?

I've attatched a reference image of what I'm going for, there does need to be subtitles but the option would be great

Are you looking for something a bit like this (boxes at the top of the first section)?

https://blue-hexahedron-d6ae.squarespace.com

Yes but if it could be images as the titles rather than words, the description is fine as a hover over lay. Also I don't need the colour features just a line outline Is enough

I can send the code I created for that client for you to adapt to your content.

yes that would be great

HTML:  

<div class="grid3">
     <div class="grid3-item">
        <h4 class="preFade fadeIn">
       
        </h4>
        <p class="preFade fadeIn">
          
          <br><br><a href="#lightbox_checks-all-the-boxes_#block-yui_3_17_2_1_1671041256442_413710">Learn more →</a></p>
      </div> 
      <div class="grid3-item">
        <h4 class="preFade fadeIn">
        
        </h4>
        <p class="preFade fadeIn">
          
          
          <br><br><a href="#lightbox_checks-all-the-boxes_#block-yui_3_17_2_1_1671041256442_426339">Learn more →</a></p>
      </div> 
      <div class="grid3-item">
        <h4 class="preFade fadeIn">
        
        </h4>
        <p class="preFade fadeIn">
          
          <br><br><a href="#lightbox_checks-all-the-boxes_#block-42da99d4a0e6627c7afe">Learn more →</a></p>
      </div> 
     <div class="grid3-item">
        <h4 class="preFade fadeIn">
       
       </h4>
        <p class="preFade fadeIn">
          
          <br><br><a href="#lightbox_checks-all-the-boxes_#block-e7a6854510ee77df193c">Learn more →</a></p>
      </div> 
      <div class="grid3-item">
        <h4 class="preFade fadeIn">
        
        </h4>
        <p class="preFade fadeIn">
          
          <br><br><a href="#lightbox_checks-all-the-boxes_#block-4b50be3d262d44b57a30">Learn more →</a></p>
      </div> 
      <div class="grid3-item">
        <h4 class="preFade fadeIn">
        
        </h4>
        <p class="preFade fadeIn">
          
          <br><br><a href="#lightbox_checks-all-the-boxes_#block-b5d38cf44218ea76dfc5">Learn more →</a></p>
      </div> 
</div>

Custom CSS

// Boxes! // CSS Grid 3x2

.grid3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 10px;
  gap:20px 20px;
}
.grid3-item {
  text-align: center;
  padding:12px;
  border:1px solid white;
  min-height:210px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  justify-content: center;
  transition: ease-in-out 0.1s;
}
.grid3-item h4 {
  font-family: 'Hatton-Semibold', serif;
  margin:0;
}
.grid3-item p {
  font-size:0.8rem;
  line-height:1.3em;
  visibility:hidden;
  height:0;
  opacity:0;
}
.grid3-item:hover {
  background-color:@main;
  box-shadow:6px 6px @accent;
  p {
    visibility:initial;
    height:initial;
    opacity:1;
  }
}
@media screen and (max-width:1000px) {
  .grid3 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: auto;
    gap:20px;
  }
  .grid3-item {
    min-height:180px
  }
}
@media screen and (max-width:767px) {
  .grid3-item h4 {
    font-size:4vw;
  }
}

How would I add images to this code? so that there would be images then you hover over and they would switch to text?

<img src="IMAGE URL HERE">

Where about in the code would this go? 

Below is the html code I have so far, I'm wanting to have the BOLD TITLES on a separate title form the text but I can't seem to do this whilst maintainting the hover effect- any ideas?

<div class="grid3">
     <div class="grid3-item">
        <h4 class="preFade fadeIn">
       
        </h4>
        <p class="preFade fadeIn">
          
          <br><br><a href="#lightbox_checks-all-the-boxes_#block-yui_3_17_2_1_1671041256442_413710">
         
           MADE TO ORDER
            
Made in accordance with our customer's specifications to minimise wastage in production.</a></p>
      </div> 
      <div class="grid3-item">
        <h4 class="preFade fadeIn">
        
        </h4>
        <p class="preFade fadeIn">
          
          
          <br><br><a href="#lightbox_checks-all-the-boxes_#block-yui_3_17_2_1_1671041256442_426339">HAND CRAFTED
            
Products and/or elements have been hand crafted by artisans to preserve craft traditions and support independent artisan businesses.</a></p>
      </div> 
      <div class="grid3-item">
        <h4 class="preFade fadeIn">
        
        </h4>
        <p class="preFade fadeIn">
          
          <br><br><a href="#lightbox_checks-all-the-boxes_#block-42da99d4a0e6627c7afe">ETHICAL
            
Supply chain conforms with all relevant International Labour Organisation (ILO) policies surrounding child labour, workers rights, freedom of association, minimum wages and health & safety.</a></p>
      </div> 
     <div class="grid3-item">
        <h4 class="preFade fadeIn">
       
       </h4>
        <p class="preFade fadeIn">
          
          <br><br><a href="#lightbox_checks-all-the-boxes_#block-e7a6854510ee77df193c">ORGANIC
            
Product is made up of >70% naturally occurring raw materials, without the use of chemical or other artificial elements.</a></p>
      </div> 
      <div class="grid3-item">
        <h4 class="preFade fadeIn">
        
        </h4>
        <p class="preFade fadeIn">
          
          <br><br><a href="#lightbox_checks-all-the-boxes_#block-4b50be3d262d44b57a30">FSC TIMBER
            
Wood has been harvested in compliance with rules and regulations to protect our natural resources.</a></p>
      </div> 
      <div class="grid3-item">
        <h4 class="preFade fadeIn">
        
        </h4>
        <p class="preFade fadeIn">
          
          <br><br><a href="#lightbox_checks-all-the-boxes_#block-b5d38cf44218ea76dfc5">THOUGHTFUL FURNITURE
            
Item is reclaimed, recycled or up cycled usually an Antique or Vintage item given a new life.</a></p>
      </div> 
</div>

I would move the titles into the <h4> tags, and the image before the <h4>

This is what I have managed to do so far https://www.boxnine7.com/s-portfolio-draft-1

However, there are still several issues with the grid:

• I can't seem to get the outline visible (ideally it would be #607750)
• I want the images to disappear when hovered over and just show the text
• The text should be read as a subtitle and then the body

Is there any chance you could advise on the above?

The CSS for border needs to be:

border: 1px solid #607750;

Image disappear on hover should be simply this:

.grid3-item:hover img { 
   display:none;
}

Not sure what you need to change for this:
"The text should be read as a subtitle and then the body"