Code #1:

Responsive 2-column box that "floats" on hover, built with html and css

This page features a code snippet I played around with, which is making a two-column layout that changes into one column on a smaller screen, and has a float effect when hovered on.

code preview
html code
css code

Code Preview

This is the first box! If you're viewing this on a smaller screen like a tablet or smartphone with a size of less than 450px, this should be the first box you see. If you're viewing on a larger screen like a laptop computer you can resize the window to see the effect.

This is the second box! The "float" effect is achieved through the setting of margins, and adding a box shadow on hover. A transition effect is also added.

HTML code

The code snippets for here as well as the css section contain invisible comments to guide on how to customize the code further.

<div class="main"> <!--you may change the names of the classes here, as long as you also change their respective css codes.-->
  <div class="floaty one"> <!--these boxes have two classes at the same time!-->
    <p>This is the first box! If you're viewing this on a smaller screen like a tablet or smartphone with a size of less than 450px, this should be the first box you see. If you're viewing on a larger screen like a laptop computer you can resize the window to see the effect. </p>
  </div>
  <div class="floaty two">
    <p>This is the second box! The "float" effect is achieved through the setting of margins, and adding a box shadow on hover. A transition effect is also added. </p>
  </div>
</div>

CSS Code

.main{
  display:flex;
  padding:5px;
  padding-top:20px; /*the top padding differs from the others so that it gives room for the boxes to float*/
  height:auto;
  background-color:white; /*make sure the background color of this box is the same regular background as the floating boxes for that extra effect*/
}

.floaty{
  background-color:white;
  border:1px solid mintcream; /*optional part, though if you're going to add a border make sure that the hover part also has a border*/
  border-radius:20px;
  padding-left:15px;
  padding-right:15px;
  padding-top:5px;
  padding-bottom:5px;
  height:100%;
  margin:10px;
  margin-top:15px; 
  transition:0.4s ease-in-out; /*you can change the transition speed here! lower values make the transition quicker, higher values make it slower*/
  box-sizing:content-box;
  text-align:justify;
}
          
/*

margin-top of the .floaty:hover = margin-top of the regular .floaty-10
margin-bottom of the .floaty:hover = margin-top of the regular .floaty * 2

*/

.floaty:hover{
  margin-top:-5px; /*make sure that this is the negative value of the margin-top of the regular box, minus 10*/
  margin-bottom:30px; /*make sure that this is twice the value of the margin-top of the regular box*/
  background-color:mintcream; /*you can change the color here!*/
  border:1px solid #85adad; /*and here*/
  box-shadow:0px 5.5px 15px 5px #85adad; /*and this too, you can also change the values if you're familiar with html and css but you can also leave it be*/
}

.one{
  width:50% /*you can set different widths for these 2 boxes, though to keep it responsive I suggest using max-width instead of width, or use percentages*/
}

.two{
  width:50%;
}

/*the part below keeps things responsive, you may change the max-width to whatever threshold you want the layout to become 1 column*/
@media only screen and (max-width:450px){
  .main{
    flex-wrap:wrap;
  }
  .floaty{
    display:block;
  }
  
  .one{
    width:100%;
    order:1;
  }
  .two{
    width:100%;
    order:2;
  }
}

Code #1:

Responsive 2-column box that "floats" on hover, built with html and css

Contents

Code Preview

HTML code

CSS Code