diff --git a/.changeset/strong-toes-decide.md b/.changeset/strong-toes-decide.md
new file mode 100644
index 0000000000..bfe9b3625f
--- /dev/null
+++ b/.changeset/strong-toes-decide.md
@@ -0,0 +1,7 @@
+---
+'nextra': patch
+'nextra-theme-blog': patch
+'nextra-theme-docs': patch
+---
+
+show copy code button only on hover of container
diff --git a/packages/nextra/src/components/pre.tsx b/packages/nextra/src/components/pre.tsx
index 80b75e322d..e9fce9047c 100644
--- a/packages/nextra/src/components/pre.tsx
+++ b/packages/nextra/src/components/pre.tsx
@@ -32,7 +32,7 @@ export const Pre = ({
       {hasCopy && (
         <CopyToClipboard
           value={children}
-          className={'absolute m-2 right-0 ' + (filename ? 'top-8' : 'top-0')}
+          className={'opacity-0 transition-opacity absolute m-2 right-0 ' + (filename ? 'top-8' : 'top-0')}
         />
       )}
     </>
diff --git a/packages/nextra/styles/code-block.css b/packages/nextra/styles/code-block.css
index 179aacbdeb..142014db50 100644
--- a/packages/nextra/styles/code-block.css
+++ b/packages/nextra/styles/code-block.css
@@ -46,6 +46,10 @@ pre {
 
 [data-rehype-pretty-code-fragment] {
   @apply relative;
+
+  &:hover > .nextra-copy-button {
+    @apply opacity-100;
+  }
 }
 
 @supports (