Bloggerデザイン : Expanding Flex Accordion

1. デザインのタイプ

【Expanding Flex Accordion】
Flexboxの伸縮性を最大限に活用した、インタラクティブな画像ギャラリーです。マウスを乗せたカードが滑らかに広がり、写真の全貌を映し出すモダンなレイアウトを採用しています。

• 
• 
• 

2. デザインの特徴

• ダイナミックな伸縮アクション
  flex-growプロパティの制御により、ホバーした要素が他の要素を押し除けて広がる、心地よいアニメーションを実現しています。
• Blogger表示の完全最適化
  Blogger特有の画像制限（max-width）を強制的に解除し、どんなテンプレートでも画像が歪まず、意図したサイズで表示されるよう設計されています。
• スマートなトリミング切り替え
  通常時はobject-fit: coverで隙間なく並べ、ホバー時には画像を収める設定に切り替えることで、実用性を高めています。

3. 紹介コード

<ul class="blog-flex-container">
  <li class="blog-flex-image">
    <img src="画像URL" alt="">
  </li>
  <li class="blog-flex-image">
    <img src="画像URL" alt="">
  </li>
  <li class="blog-flex-image">
    <img src="画像URL" alt="">
  </li>
</ul>

<style>
.blog-flex-container {
  display: flex;
  gap: 0.5rem;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

.blog-flex-image {
  position: relative;
  overflow: hidden;
  flex-grow: 1;
  height: 20rem;
  border-radius: 0.5rem;
  box-shadow: 0 0 1rem rgba(0,0,0,0.3);
  transition: flex-grow 0.4s ease-in, box-shadow 0.4s ease-in;
  padding: 0 !important;
  margin: 0 !important;
}

.blog-flex-image img {
  width: auto !important;
  height: 100% !important;
  display: block;
  object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.4s ease;
  max-width: none !important;
}

.blog-flex-image:hover {
  flex-grow: 2;
  box-shadow: 0 0 1.5rem rgba(0,0,0,0.4);
}

.blog-flex-image:hover img {
  height: 100%;
  width: auto;
  object-fit: contain;
}
</style>