Like Us on Facebook

Flip Hover Effects using HTML and CSS

Hello friends Today we are going to share HTML and CSS code for creating a flip hover effects on image hover. Flipping image on mouse hover can be created using CSS3 scaling transformation. This tutorial is very easy and this effect can be easily created using few lines of code.


 

HTML Code

<ul>
    <li>
        <ul class="flip">
            <li>
                <figure>

                    <img src="images/image1.jpg" alt=""/>
                   <figcaption>
                      <h2>This is a your title!</h2>
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
                   </figcaption>
                  </figure>
                
            </li>
        </ul>
    </li>


   
 <li>
        <ul class="flip">
            <li>
                <figure>
                    <img src="images/image2.jpg" alt=""/>
                   <figcaption>
                      <h2>This is a your title!</h2>
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
                   </figcaption>
                  </figure>
            </li>
        </ul>
    </li>


    <li>
        <ul class="flip">
            <li>
                <figure>

                    <img src="images/image3.jpg" alt=""/>
                   <figcaption>
                      <h2>This is a your title!</h2>
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
                   </figcaption>
                  </figure>
            </li>
        </ul>
    </li>
</ul>

style.css

body {
    background:#65B4CD
}


ul {
    margin:20px auto;
    width:30%;

}

ul li {
    display: inline-block;
    list-style: none;
    margin:0 10px;


}

nav {
    margin:20px auto;
    text-align:center

}

nav a {
    display:inline-block;
    text-align:center;
    background:#3498db;
    font-family:'Lato',sans-serif;
    color:#fff;
    font-weight:400;
    padding:5px 26px;
    margin-right:6px;
    text-transform:uppercase;
    border:2px solid #fff;
    letter-spacing:1px;
    text-decoration:none

}

nav a.active,nav a:hover {
    background:#3498db;
    color:#1a4c6e;
    border:2px solid #1a4c6e

}

.left {
    float:left
}

.right {
    float:right
}

.center {
    margin:50px auto;
    display:block;
    width:65%

}

@media screen and (max-width: 480px) {
nav a {
    margin-top:15px
}
}

flip.css

ul li {
    display:inline-block;
    margin:0 10px

}

.flip {
    position:relative;
    width:300px;
    height:200px;
    overflow:hidden;
    float:left;
    margin-right:20px

}

.flip figure {
    margin:0;
    padding:0;
    position:relative;
    cursor:pointer;
    margin-left:-50px

}

.flip figure img {
    display:block;
    position:relative;
    z-index:10;
    margin:-15px 0

}

.flip figure figcaption {
    display:block;
    position:absolute;
    z-index:5;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box

}

.flip figure h2 {
    font-family:'Lato';
    color:#fff;
    font-size:20px;
    text-align:left

}

.flip figure p {
    display:block;
    font-family:'Lato';
    font-size:12px;
    line-height:18px;
    margin:0;
    color:#fff;
    text-align:left

}

.flip figure figcaption {
    top:0;
    left:0;
    width:100%;
    height:100%;
    padding:29px 44px;
    background-color:rgba(26,76,110,0.5);
    text-align:center;
    backface-visibility:hidden;
    -webkit-transform:rotateY(-180deg);
    -moz-transform:rotateY(-180deg);
    transform:rotateY(-180deg);
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    transition:all .5s

}

.flip figure img {
    backface-visibility:hidden;
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    transition:all .5s

}

.flip figure:hover img,figure.hover img {
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    transform:rotateY(180deg)

}

.flip figure:hover figcaption,figure.hover figcaption {
    -webkit-transform:rotateY(0);
    -moz-transform:rotateY(0);
    transform:rotateY(0)

}

Posted By UandBlog

UandBlog is a Global Leading source of Finance, Health, Lifestyle, Technology, Gaming and Programing and other information, it is a fastest growing blog for all , for latest post or information like us on facebook , follow on Twitter, Google+ and Pinterest.

Comments ( 0 )

    Leave a comment..

    Click to login.