Card flipper using bootstrap 4

Here is a nice card flipper. On the front site the name, image and short description.
And on the back side a longer description with some links to other pages.
Go with your mouse ovr the card and you will see the result.

Example:

New York Skyline

card image

This is the skyline of New York by night.

New York Skyline

The City of New York, often called New York City (NYC) or simply New York, is the most populous city in the United States.

With an estimated 2017 population of 8,622,698 distributed over a land area of about 302.6 square miles (784 km2).

New York City is also the most densely populated major city in the United States.


First we have to setup Bootstrap and jquery, Putt this in your section:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

And off course the css:

@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

section {
    padding: 10px 0;
}

#flipper .card {
	border-color: #ddd;
    background: #eee;
}

.image-flip:hover .backside,
.image-flip.hover .backside {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
    border-radius: .25rem;
}

.image-flip:hover .frontside,
.image-flip.hover .frontside {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.mainflip {
    -webkit-transition: 1s;
    -webkit-transform-style: preserve-3d;
    -ms-transition: 1s;
    -moz-transition: 1s;
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transition: 1s;
    transform-style: preserve-3d;
    position: relative;
}

.frontside {
    position: relative;
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    z-index: 2;
    margin-bottom: 20px;
	box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
}

.backside {
    position: absolute;
    top: 0;
    left: 0;
    background: white;
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    -webkit-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
    -moz-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
    box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
}

.frontside,
.backside {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: 1s;
    -webkit-transform-style: preserve-3d;
    -moz-transition: 1s;
    -moz-transform-style: preserve-3d;
    -o-transition: 1s;
    -o-transform-style: preserve-3d;
    -ms-transition: 1s;
    -ms-transform-style: preserve-3d;
    transition: 1s;
    transform-style: preserve-3d;
}

.frontside .card,
.backside .card {
    min-height: 312px;
}

.backside .card a {
    font-size: 18px;
    color: #007b5e !important;
}

.frontside .card .card-title,
.backside .card .card-title {
    color: #007b5e !important;
}

.frontside .card .card-body img4 {
    width: 130px;
    height: 130px;
    border-radius: 50%;
}

And finally the bootstrap code, putt this in your BODY of your page:

<section id="flipper">
    <div class="container-fluid">
        <div class="row">
		
            <div class="col-xs-12 col-sm-6 col-md-4">
                <div class="image-flip" ontouchstart="this.classList.toggle('hover');">
                    <div class="mainflip">
                        <div class="frontside">
                            <div class="card">
                                <div class="text-center mt-4">
									<h4 class="card-title">New York Skyline</h4>
                                    <p><img class="img-fluid img-circle" src="http://scripts.friendsinwar.com/demo_scripts/FiW%20IG%20v1.0/images/uploads/thumb/new_york_night_skyscrapers_top_view.jpg" class="img-circle" alt="card image"></p>
                                    
                                    <p class="card-text">This is the skyline of New York by night.</p>
                                    
                                </div>
                            </div>
                        </div>
                        <div class="backside">
                            <div class="card">
                                <div class="text-center mt-4">
                                    <h4 class="card-title">New York Skyline</h4>
                                    <p class="card-text">The City of New York, often called New York City (NYC) or simply New York, is the most populous city in the United States.</p>
									<p class="card-text">With an estimated 2017 population of 8,622,698 distributed over a land area of about 302.6 square miles (784 km2).</p>
                                    <p class="card-text"><a href="#">New York City</a> is also the most densely populated major city in the United States.</p>
									<ul class="list-inline">
                                        <li class="list-inline-item">
                                            <a class="social-icon text-xs-center" target="_blank" href="#">
                                                <i class="fa fa-facebook"></i>
                                            </a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a class="social-icon text-xs-center" target="_blank" href="#">
                                                <i class="fa fa-twitter"></i>
                                            </a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a class="social-icon text-xs-center" target="_blank" href="#">
                                                <i class="fa fa-skype"></i>
                                            </a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a class="social-icon text-xs-center" target="_blank" href="#">
                                                <i class="fa fa-google"></i>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
	</div>
</div>

You can download the complete code below:

Download: Card flipper using bootstrap 4
Clicks: 144, Filesize: 1.5 KB, Date: 02 Sep. 2018


Leave a Reply

Your email address will not be published. Required fields are marked *