Platform
- CMS
- AI
- Cloud
- Metaverse
- Mobile
- Blockchain
- Digital
- IoT
Pricing
Developers
Enterprise
About Us
Contact

How to Create Service Boxes with Text Hovers

Give your visitors additional information without compromising on sleek visual design by using these service boxes with text hovers.

Boxes or cards are a great way to organize and display information. You can show more information about your services by using boxes with a hover feature. And as we've pointed out in previous blog posts, engaging visual elements can help reduce the bounce rate of a page by keeping your visitors involved with your content for longer.

We start by creating a section to group our boxes' content. Inside the section, the code follows the Bootstrap grid system which is made up of rows and columns. Here's an example (three-column) grid system in Bootstrap:

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

In this example, we're using a three-column grid. Our first container is a 12 column introductory text that takes up the whole width of the section:

<div class="col-12">
	<h2 class="text-center text-uppercase w-100">LunarXP</h2>
	<p class="text-center mt-3 mb-4 w-100 h5">
     At LunarXP, we’re dreamers and explorers. We’ve always looked up for purpose – and we’ve never looked back. 
     As a company, we believe that the future of mankind lies beyond earth and in the stars. 
     Together, we can make a better tomorrow for all of us. It starts with one small step.					
    </p>
</div>

We put three more containers to place our three boxes. Inside each div with a class of "col-xl-4 col-sm-6", there are two div containers inside. The first one with a class of "box-lunar" is the front of our box while the second div container with a class of "box-hover" is the back of our box so basically, our main "col-xl-4 col-sm-6" container is one box that contains the code for the both sides of our box.

HTML

<section class="section-boxes">
        <div class="container">
            <div class="row">
                <div class="col-12">
                     <h2 class="text-center text-uppercase w-100">LunarXP</h2>
                        <p class="text-center mt-3 mb-4 w-100 h5">
                            At LunarXP, we’re dreamers and explorers. We’ve always looked up for purpose – and we’ve never looked back. 
                            As a company, we believe that the future of mankind lies beyond earth and in the stars. 
                            Together, we can make a better tomorrow for all of us. It starts with one small step.					
                        </p>
                </div>
        
                <div class="col-xl-4 col-sm-6">
                    <div class="box-lunar lunarxp-launch-site p-3 mt-3 mt-sm-4 mt-lg-0 d-flex align-items-center justify-content-center flex-column position-relative w-100">
                        <p class="font-weight-bold primary-text text-uppercase">LunarXP Launch Site</p>
                        <div class="box-hover lunarxp-launch-site bg-dark p-3 p-lg-4 top-0 left-0 text-white position-absolute w-100 h-100">
                            <h2 class="text-center mb-3 text-uppercase">LunarXP Launch Site</h2>
                            <p class="text-white text-center mb-0">Formerly NASA’s International Space Station, the LunarXP Launch Site is the first stop on the standard route to the lunar surface.</p>
                            <a href="http://www.lunarxp.com/" class="btn btn-dark d-block mt-3 mx-auto text-white border-white">Learn More</a>
                        </div><!-- .box-hover -->
                    </div><!-- .box-lunar-->
                </div>
                <div class="col-xl-4 col-sm-6">
                    <div class="box-lunar lunarxp-control-center p-3 mt-3 mt-sm-4 mt-lg-0 d-flex align-items-center justify-content-center flex-column position-relative w-100">
                        <p class="font-weight-bold primary-text text-uppercase">LunarXP Control Center</p>
                        <div class="box-hover lunarxp-control-center p-3 p-lg-4 bg-dark top-0 left-0 text-white position-absolute w-100 h-100">
                            <h2 class="text-center mb-3 text-uppercase">LunarXP Control Center</h2>
                            <p class="text-white text-center mb-0">Our control room where directors and engineers supervise the countdown for all rocket lunar launches.</p>
                            <a href="http://www.lunarxp.com/" class="btn btn-dark d-block mt-3 mx-auto text-white border-white">Learn More</a>
                        </div><!-- .box-hover -->
                    </div><!-- .box-lunar-->
                </div>
                <div class="col-xl-4 col-sm-6">
                    <div class="box-lunar lunarxp-rocket-center p-3 mt-3 mt-sm-4 mt-lg-0 d-flex align-items-center justify-content-center flex-column position-relative w-100">
                        <p class="font-weight-bold primary-text text-uppercase">LunarXP Rocket Center</p>
                        <div class="box-hover lunarxp-rocket-center p-3 p-lg-4  bg-dark top-0 left-0 text-white position-absolute w-100 h-100">
                            <h2 class="text-center mb-3 text-uppercase">LunarXP Rocket Center</h2>
                            <p class="text-white text-center mb-0">Our fleet of advanced spacecraft have revolutionized the lunar economy. These amazing vessels are also paving the way for reaching Mars in the next decade. </p>
                            <a href="http://www.lunarxp.com/" class="btn btn-dark d-block mt-3 mx-auto text-white border-white">Learn More</a>
                        </div><!-- .box-hover -->
                    </div><!-- .box-lunar-->
                </div>
            </div><!-- .row-->
        </div><!-- .container-->
    </section>

Once we're done with our HTML code, we do our layout and styling with CSS. First, we hide the back of our box so that we don't see both the front and the back of the box at the same time. In order to do that, we set the box-hover container to "display: none" then we use the CSS hover selector to activate the box transition when a mouse hovers over the box and finally set the display to flex on hover so that when a mouse hovers over the box, our box is no longer hidden:

.section-boxes .box-lunar .box-hover {
    display: none;
}
.section-boxes .box-lunar:hover {
    cursor: pointer;
}
.section-boxes .box-lunar:hover .box-hover {
    display: flex;
    flex-direction: column;
}

Here's the complete CSS:

CSS

html, 
body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://raw.githubusercontent.com/solodev/service-boxes-with-text-hovers/master/images/satellite.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

p {
    font-size: 21px;
}
.section-boxes {
    padding-top: 8%;
    padding-bottom: 8%;
}

.primary-text, .col-12 {
  color: #f1f1f1;
}

.col-12 h2,
.col-12 p {
    text-shadow: 2px 2px 2px #222;
}

.lunarxp-launch-site, .lunarxp-control-center, .lunarxp-rocket-center {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.lunarxp-launch-site {
    background-image: url("https://raw.githubusercontent.com/solodev/service-boxes-with-text-hovers/master/images/launch-site.jpg");
}

.box-hover.lunarxp-launch-site {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://raw.githubusercontent.com/solodev/service-boxes-with-text-hovers/master/images/launch-site.jpg');
}

.box-hover.lunarxp-control-center {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://raw.githubusercontent.com/solodev/service-boxes-with-text-hovers/master/images/control-center.jpg');
}

.box-hover.lunarxp-rocket-center {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://raw.githubusercontent.com/solodev/service-boxes-with-text-hovers/master/images/rocket.jpg');
}

.lunarxp-control-center {
    background-image: url("https://raw.githubusercontent.com/solodev/service-boxes-with-text-hovers/master/images/control-center.jpg");
}

.lunarxp-rocket-center {
    background-image: url("https://raw.githubusercontent.com/solodev/service-boxes-with-text-hovers/master/images/rocket.jpg");
}

@media (min-width: 576px) and (max-width: 768px) {
    .section-boxes {
        padding-top: 40px;
        padding-bottom: 95px;
   }
}
.section-boxes .box-lunar, .bg-dark  {
    -webkit-box-shadow: 0px 5px 32px 0px rgba(51, 51, 51, 0.1);
    -moz-box-shadow: 0px 5px 32px 0px rgba(51, 51, 51, 0.1);
    box-shadow: 0px 5px 32px 0px rgba(51, 51, 51, 0.1);
    height: 400px;
    background-color: #010101!important;
    position: relative;
}

.section-boxes .box-lunar img {
    max-height: 110px;
}
.section-boxes .box-lunar p {
    font-size: 18px;
    min-height: 60px;
}

p.text-uppercase {
    position: absolute;
    bottom: 0;
    line-height: 5rem;
    width: 100%;
    text-align: center;
    padding: 0 1rem;
    margin-bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.col-12 h2, p.text-uppercase {
    font-family: 'Space Mono', monospace;
}

.btn {
    border-radius: 0;
}

.section-boxes .box-lunar .box-hover {
    display: none;
}
.section-boxes .box-lunar .box-hover h2 {
    font-size: 18px;
    font-family: 'Space Mono', monospace;
}
.section-boxes .box-lunar .box-hover p {
    font-size: 15px;
    flex-grow: 1;
}
.section-boxes .box-lunar .box-hover .btn-primary {
    width: 172px;
}
.section-boxes .box-lunar:hover {
    cursor: pointer;
}
.section-boxes .box-lunar:hover .box-hover {
    display: flex;
    flex-direction: column;
}

Download from Github

Share on Facebook Tweet It

Paris Tuzun
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Sign up to explore

Create an account in seconds and start building today.

Sign up for Solodev