Monday, January 30, 2017

CSS3 image and text hover effects

                No comments   

Intoduction :-
Hii Friends... 

 Today I explain how to make  CSS3 image hover effects. On the modern web there are so many techniques that can be used to create interesting interactions, but the simplest and most easy is use CSS, and specifically the additions that came with CSS3. It gives us beautiful animation and transitions or image effects.

Demo :-


Hover Effect
img12

DotNet Modules

This is a Plateform, Of new ideas and Interesting modules.
Example :- 

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
    <title>Hover Effect</title>
    <style>
        .grid figure
        {
            position: relative;
            float: left;
            overflow: hidden;
            margin: 10px 1%;
            min-width: 320px;
            max-width: 480px;
            max-height: 360px;
            width: 48%;
            background: #3085a3;
            text-align: center;
        }
        .grid figure figcaption
        {
            padding: 2em;
            color: #fff;
            text-transform: uppercase;
            font-size: 1.25em;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }
        .grid figure p
        {
            letter-spacing: 1px;
            font-size: 68.5%;
        }
        figure.effect-marley figcaption
        {
            text-align: right;
        }
        figure.effect-marley h2, figure.effect-marley p
        {
            position: absolute;
            right: 30px;
            left: 30px;
            padding: 10px 0;
        }
        figure.effect-marley p
        {
            bottom: 30px;
            line-height: 1.5;
            -webkit-transform: translate3d(0,100%,0);
            transform: translate3d(0,100%,0);
        }
        figure.effect-marley h2
        {
            top: 30px;
            -webkit-transition: -webkit-transform 0.35s;
            transition: transform 0.35s;
            -webkit-transform: translate3d(0,20px,0);
            transform: translate3d(0,20px,0);
        }
        figure.effect-marley:hover h2
        {
            -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
        }
        figure.effect-marley h2::after
        {
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            height: 4px;
            background: #fff;
            content: '';
            -webkit-transform: translate3d(0,40px,0);
            transform: translate3d(0,40px,0);
        }
        figure.effect-marley h2::after, figure.effect-marley p
        {
            opacity: 0;
            -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
            transition: opacity 0.35s, transform 0.35s;
        }
        figure.effect-marley:hover h2::after, figure.effect-marley:hover p
        {
            opacity: 1;
            -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content">
            <div class="grid">
                <figure class="effect-marley">
                        <img src="img/12.jpg" alt="img12"/>
                        <figcaption>
                            <h2>DotNet <span>Modules</span></h2>
                            <p>This is a Plateform, Of new ideas and Interesting modules.</p>
                        </figcaption>           
                    </figure>
            </div>
        </div>
</body>
</html>

0 comments:

Post a Comment