title: How to use swiftUI matched geometry to present a detail card view on top of elements (instead of increasing frame height)
body: <p>I am attempting my first steps using matchedgeometry and have followed some tutorials to get a simple view to expand when selected.I have two files, a card view and a content view.  I would like to place all of my card views in a horizontal scrollview.</p>
  <pre><code>import SwiftUI
  
  struct smallCard: View {
  @State private var flag: Bool = true
  @Namespace var nspace
  var body: some View {
     
      if flag {
          VStack{
              Image(&quot;chemex.jpg&quot;)
                      .resizable()
                      .matchedGeometryEffect(id: &quot;image&quot;, in: nspace)
                      .scaledToFill()
                      
          Spacer()
              Button(&quot;CHEMEX&quot;) { withAnimation(.default) { flag.toggle() } }
                  .matchedGeometryEffect(id: &quot;text&quot;, in: nspace)
          Spacer()
                  .frame(height:8)
          }
          .matchedGeometryEffect(id: &quot;geoeffect1&quot;, in: nspace)
          .frame(width: 100, height: 100, alignment: .center)
          .background(Color.white)
          .cornerRadius(20)
          .shadow(color: .gray, radius: 9, x: 0, y: 9)
      }
      
      if !flag {
          
          VStack{
          Image(&quot;chemex.jpg&quot;)
                  .resizable()
                  .matchedGeometryEffect(id: &quot;image&quot;, in: nspace)
                  .scaledToFit()
                  
              
          Spacer()
              Button(&quot;CHEMEX&quot;) { withAnimation(.default) { flag.toggle() } }
                  .matchedGeometryEffect(id: &quot;text&quot;, in: nspace)
          Spacer()
                  .frame(height:20)
          }
          .matchedGeometryEffect(id: &quot;geoeffect1&quot;, in: nspace)
          .layoutPriority(1)
          .frame(width: 300, height: 600, alignment: .center)
          .background(Color.white)
          .cornerRadius(20)
          .shadow(color: .gray, radius: 9, x: 0, y: 9)
      }
  }
      
  </code></pre>
  <p>I the have my main content view:</p>
  <pre><code>import SwiftUI
  
  struct ContentView: View {
  
  
  var body: some View {
      VStack{
          HStack{
          Text(&quot;My App&quot;)
              .font(.title)
              .padding(.leading, 25)
          Spacer()
          }
          
          ScrollView(.horizontal){
              HStack{
              smallCard()
                  .padding(.horizontal)
              smallCard()
                  .padding(.horizontal)
              smallCard()
                  .padding(.horizontal)
              
              }
          }
          
          
          
      }
      .frame(alignment: .center)
  }
  </code></pre>
  <p>This currently works for clicking on the small card and the matched geometry animates this to the larger card.  The issue I have is that this changes the height of my scrollview and as such this moves everything else such as my title up and out of view.</p>
  <p>Effectively what I would like to achieve is like a popover view, so that this detail view is on top of all of the elements in my content view, but whilst using matchedgeometry (or an alternative solution) to animate nicely between the views.</p>
  <p>Is this possible? I am at the point where I do not know if there is a solution to this.</p>