CODEWITHSUNDEEP
htmlcss
Mustafa Tosuncu
Mustafa Tosuncu

Reputation: 51

How to align 3 pictures perfect horizontally?

I have a main page with three colors each divided in 1/3 of the page and each in the color must be a centered picture which will flip when hovering over it. I can't manage the align the three pictures perfectly apart from eachother but also centered in every color side.

    body{
    margin: 0;
    padding: 0;
    width: 100%;
    background: url(../img/backgroundIndex.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.indexLogo{
    width: 100%;
}

.indexLogoImg{
    width: 40%;
    margin-left: 30%;
    z-index: 10;
    position: absolute;
}

#f1_container {
    position: relative;
    margin-top: 25%;
    width: 200px;
    height: 120px;
    z-index: 1;
    padding-right: 10%;
    padding-left: 8%;
    float:left;
}
#f1_container {
    perspective: 1000;
}
#f1_card {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: all 0.4s linear;
}
#f1_container:hover #f1_card {
    transform: rotateY(180deg);
}
.face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}
.face.back {
    display: block;
    transform: rotateY(180deg);
    box-sizing: border-box;
    padding: 10px;
    color: white;
    text-align: center;
    background-color: #aaa;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Uitgaanscentrum De Bonte Koe</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="css/index.css" type="text/css"/>
    <meta name="description" content="Uitgaanscentrum De Bonte Koe door Mustafa Tosuncu en Alperen Yavuz">
    <meta name="keywords" content="Mustafa, Tosuncu, Mustafa, Tosuncu, Website, ALA, De, Bonte, Koe, Alperen, Yavuz">
    <meta name="author" content="Mustafa Tosuncu">
</head>
<body>
    <header class="indexLogo"><img class="indexLogoImg" src="img/logo.png"/></header>
    <div id="f1_container">
        <div id="f1_card" class="shadow">
            <div class="front face">
                <img src="http://www.startpagina.nl/athene/dochters/rimini/images/party_time-1280x800.jpg" width="200" height="120"/>
            </div>
            <a href="#"><div class="back face center">
                    <p>This is nice for exposing more information about an image.</p>
                    <p>Any content can go here.</p>
                </div></a>
        </div>
    </div>
    <div id="f1_container">
        <div id="f1_card" class="shadow">
            <div class="front face">
                <img src="http://www.restauranthoteldelakei.nl/wp-content/uploads/2014/01/restaurant.jpeg" width="200" height="120"/>
            </div>
            <a href="#"><div class="back face center">
                    <p>This is nice for exposing more information about an image.</p>
                    <p>Any content can go here.</p>
                </div></a>
        </div>
    </div>
    <div id="f1_container">
        <div id="f1_card" class="shadow">
            <div class="front face">
                <img src="http://emmaseetcafe.nl/wp-content/uploads/2014/09/Cinema.jpg" width="200" height="120"/>
            </div>
            <a href="#"><div class="back face center">
                    <p>This is nice for exposing more information about an image.</p>
                    <p>Any content can go here.</p>
                </div></a>
        </div>
    </div>
</body>
</html>

Upvotes: 2

Views: 113

Answers (1)

kushal kant
kushal kant

Reputation: 450

you can use this css given below; 

  .f1_container {
         float:left;
         width:33.33%
    }

Upvotes: 3

Related Questions