Zoom background image in flexbox layout without affecting neighbour elements - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Container

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Flex Container

Description

Zoom background image in flexbox layout without affecting neighbour elements

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

.index-wrapper {<!--from ww  w  .j  a va 2 s . c o  m-->
   display: flex;
   flex-flow: column;
   height: 100vh;
}
.index-wrapper .index-menu {
   box-shadow: 0 0 2px 2px #d0d0d0;
   z-index: 2;
   background: white;
   color: black;
   padding: 2em;
}
.index-wrapper .index-main {
   display: flex;
   background: yellow;
   flex-direction: row;
   flex: 1;
   flex-wrap: wrap;
}
.index-wrapper .index-main .index-square {
   flex-basis: 50%;
   display: flex;
   flex-flow: column;
   overflow: hidden;
}
.index-wrapper .index-main .index-square .index-square-inner {
   flex: 1;
   width: 100%;
   display: flex;
   flex-flow: column;
   justify-content: center;
   align-items: center;
}
.index-wrapper .index-main .index-square .index-square-inner:hover {
   transform: scale(1.1);
}
.index-wrapper .index-main .index-square .index-square-inner div {
   flex: 1;
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
}


      </style> 
 </head> 
 <body> 
  <div class="index-wrapper"> 
   <nav class="index-menu">
     123 
   </nav> 
   <main class="index-main"> 
    <div class="index-square" style="background: yellow;"></div> 
    <div class="index-square"> 
     <div class="index-square-inner" style="background-image: url(https://www.java2s.com/style/demo/InternetExplorer.png); 
     background-position: center; background-size: cover;transition: all .2s ease-in-out;"> 
      <div style="background: rgba(0, 0, 0, 0.4);">
        123 
      </div> 
     </div> 
    </div> 
    <div class="index-square" style="background: pink;">
      123 
    </div> 
    <div class="index-square" style="background: purple;">
      123 
    </div> 
   </main> 
  </div>  
 </body>
</html>

Related Tutorials