logo

Effets sur image

Gradient

HTML :

<div>
    <a class="c-preview">
        <div class="c-preview__img"></div>
        <h2 class="c-preview__title">Gradient Hover Effect</h2>
    </a>
</div>

CSS :

<style>
    .c-preview {
        background: #000;
        background: -moz-linear-gradient(-45deg, #000000 0%, #000000 25%, #1e539e 50%, #ff3083 75%, #7800a8 100%);
        /* FF3.6-15 */
        background: -webkit-linear-gradient(-45deg, #000000 0%, #000000 25%, #1e539e 50%, #ff3083 75%, #7800a8 100%);
        /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(135deg, #000000 0%, #000000 25%, #1e539e 50%, #ff3083 75%, #7800a8 100%);
        /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        background-size: 400% 400%;
        background-repeat: no-repeat;
        display: flex;
        width: 500px;
        height: 500px;
        max-width: 100vw;
        max-height: 100vh;
        justify-content: center;
        align-items: center;
        color: #fff;
        position: relative;
        cursor: pointer;
        transition: 0.5s all;
    }

    .c-preview__img {
        position: absolute;
        left: 0;
        top: 0;
        background: rgb(0, 0, 0) url(../../all-css/imgTest/7.jpg) no-repeat center center;
        background-size: cover;
        width: 100%;
        height: 100%;
        z-index: 1;
        opacity: 0.5;
        mix-blend-mode: screen;
    }

    .c-preview__title {
        position: relative;
        z-index: 10;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .c-preview:hover {
        background-position: 100% 100%;
    }

    .c-preview:hover__title {
        text-shadow: 0 0 20px black;
    }
</style>

Refléction

HTML :

<div class="cube4">
    <a href="#" class="photo">
        <h1 class="pos">Amber Heard</h1>
        <img src="../../all-css/imgTest/2.jpg" alt="bla">
        <div class="glow-wrap">
            <i class="glow"></i>
        </div>
    </a>
</div>

CSS :

<style>
    .cube4 {
        width: 100%;
        min-height: 100vh;
    }

    .cube4>a {
        color: #111
    }

    .photo {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: block;
    }

    .photo img {
        width: 200px;
        height: 280px;
        object-fit: cover;
        filter: grayscale(100%) contrast(120%);
        box-shadow: 10px 15px 25px 0 rgba(0, 0, 0, .2);
        display: block;
        transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1);
        margin-top: -10px;
    }

    .photo:hover img {
        box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, .1);
    }

    .photo .glow-wrap {
        overflow: hidden;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        margin-top: -10px;
    }

    .photo .glow {
        display: block;
        position: absolute;
        width: 40%;
        height: 200%;
        background: rgba(255, 255, 255, .2);
        top: 0;
        filter: blur(5px);
        transform: rotate(45deg) translate(-450%, 0);
        transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1);
    }

    .photo:hover .glow {
        transform: rotate(45deg) translate(450%, 0);
        transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);
    }

    .photo:hover img,
    .photo:hover .glow-wrap {
        margin-top: 0;
    }

    .pos {
        position: absolute;
        z-index: 1;
        transform: translate(-25%, -65%);
        font-family: 'Montserrat', sans-serif;
        margin: 0;
        line-height: 1.2;
    }


    /* Ends */

    #author {
        font-family: Helvetica, Arial;
        text-transform: uppercase;
        font-size: 14px;
        text-decoration: none;
        position: fixed;
        bottom: 25px;
        left: 50%;
        transform: translateX(-50%);
        color: #888;
    }

    #author:hover {
        color: #111;
    }
</style>

Reflet

HTML :

<div class="start">
    <div class="images-selector">
        <input type="radio" id="duck" name="image" value="duck">
        <label for="duck" class="img-card img1"></label>
        <input type="radio" id="dog" name="image" value="dog">
        <label for="dog" class="img-card img2"></label>
        <input type="radio" id="cat" name="image" value="cat">
        <label for="cat" class="img-card img3"></label>
        <input type="radio" id="cow" name="image" value="cow">
        <label for="cow" class="img-card img4"></label>
    </div>
</div>

CSS :

<style>
    .start {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        position: relative;
        width: 100%;
        height: 90vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .images-selector input {
        position: absolute;
        z-index: 10;
    }

    .images-selector input:checked+.img-card {
        filter: none;
        transform: scaleY(1);
    }

    .img-card {
        display: inline-block;
        width: 250px;
        height: 200px;
        background-size: contain;
        background-repeat: no-repeat;
        cursor: pointer;
        transition: all 200ms ease-in;
        filter: grayscale(1) opacity(.8);
    }

    .img-card:hover {
        filter: grayscale(0) opacity(1);
            /*   box-shadow:  0px 8px 4px rgba(0, 0, 0, 0.3),
            0px 10px 2px rgba(0, 0, 0, 0.1); */
        }

        .img-card::before,
        .img-card::after {
            transform: scaleY(-1);
        }

        /*reflection*/
        .img-card:hover::after {
            content: '';
            background-image: inherit;
            background-repeat: no-repeat;
            background-position: bottom;
            background-size: cover;
            width: inherit;
            height: 40%;
            position: absolute;
            bottom: -25%;
        }

        /*fade reflection*/
        .img-card:hover::before {
            content: '';
            width: inherit;
            height: 42%;
            position: absolute;
            bottom: -25%;
            background: linear-gradient(to bottom, rgba(255, 255, 255, .9), rgba(255, 255, 255, .5));
            z-index: 1;
        }

        .img1 {
            background-image: url(../../all-css/imgTest/4.jpg);
        }

        .img2 {
            background-image: url(../../all-css/imgTest/8.jpg);
        }

        .img3 {
            background-image: url(../../all-css/imgTest/2.jpg);
        }

        .img4 {
            background-image: url(../../all-css/imgTest/1.jpeg);
        }
    </style>

Ombres et déformations

HTML :

<div class="start3">
    <div class="promo" style="--overlay-color: hotpink">
        <div class="image-wrapper"><img src="../../all-css/imgTest/3.jpg" alt="truc"></div>
        <h2 class="titre" data-cta="Get out there ?">.................</h2>
    </div>
    <div class="promo" style="--overlay-color: yellow">
        <div class="image-wrapper"><img src="../../all-css/imgTest/7.jpg" alt="truc"></div>
        <h2 class="titre" data-cta="Find yours ?">................</h2>
    </div>
    <div class="promo" style="--overlay-color: dodgerblue">
        <div class="image-wrapper"><img src="../../all-css/imgTest/9.jpg" alt="truc"></div>
        <h2 class="titre" data-cta="Grab a board ?">.................</h2>
    </div>
    <div class="promo" style="--overlay-color: darkgreen">
        <div class="image-wrapper"><img src="../../all-css/imgTest/6.jpg" alt="truc"></div>
        <h2 class="titre" data-cta="Take a walk ?">.......................</h2>
    </div>
</div>

CSS :

<style>
    :root {
        --size: 60vmin;
        --space: 8vmin;
        --duration: 300ms;
        --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
        --bounce-out: cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    * {
        box-sizing: border-box;
    }

    .start3 {
        display: grid;
        place-items: center;
        grid-gap: var(--space);
        margin: 0 auto;
        padding: var(--space);
        font-family: "Sura", sans-serif;
        color: white;
        background-color: rgb(29, 30, 34);
    }

    .promo {
        position: relative;
        cursor: pointer;
        width: var(--size);
        height: var(--size);
    }

    .titre {
        --font-size: calc(var(--size) / 8);

        display: flex;
        align-items: center;
        position: absolute;
        left: 0;
        bottom: 0;
        font-size: var(--font-size);
        font-weight: 700;
        line-height: 1.2;
        white-space: nowrap;
        transform: translate(-10%, -50%);
        transition: transform var(--duration) var(--ease-out);
    }

    .titre::after {
        content: attr(data-cta);
        display: inline-block;
        margin-left: 1.5vmin;
        font-size: calc(var(--font-size) / 3.25);
        font-weight: 400;
        letter-spacing: 0.125vmin;
        opacity: 0;
        transform: translateX(-25%);
        transition: transform var(--duration) var(--ease-out),
        opacity var(--duration) var(--ease-out);
    }

    .image-wrapper {
        width: var(--size);
        height: var(--size);
        overflow: hidden;
        clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 0 50%, 0% 0%);
        transition: transform var(--duration) var(--ease-out),
        clip-path var(--duration) var(--ease-out);
    }

    .image-wrapper img {
        position: relative;
        width: 120%;
        height: 100%;
        object-fit: cover;
        transform: translateX(-10%);
        transition: transform var(--duration) var(--ease-out);
    }

    .image-wrapper::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--overlay-color);
        mix-blend-mode: multiply;
        opacity: 0;
        transform: translateZ(0);
        transition: opacity var(--duration) var(--ease-out);
    }

    .promo:hover img {
        transform: translateX(0);
    }

    .promo:hover .image-wrapper {
        clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
        transform: translateX(25%);
        transition-timing-function: var(--bounce-out);
    }

    .promo:hover .titre {
        transform: translate(5%, -50%);
        transition-timing-function: var(--bounce-out);
    }

    .promo:hover .titre::after {
        opacity: 1;
        transform: translateX(0);
        transition-timing-function: var(--bounce-out);
    }

    .promo:hover .image-wrapper::after {
        opacity: 1;
    }
</style>

Images coupées

HTML :

<div class="image-wrapper">
    <img class="image-1" src="../../all-css/imgTest/9.jpg" />
    <img class="image-2" src="../../all-css/imgTest/9.jpg" />
    <img class="image-3" src="../../all-css/imgTest/9.jpg" />
    <img class="image-4" src="../../all-css/imgTest/9.jpg" />
</div>

CSS :

<style>
    .image-wrapper {
        width: 600px;
        height: 400px;
        position: relative;
        margin: 30vh auto;
    }

    .image-wrapper img {
        position: absolute;
        top: 0;
        left: 0;
        transform-origin: left;
    }

    .image-1 {
        clip-path: polygon(0 0, 0 32%, 28% 0);
        transform: translate(-10px, -10px);
        transition: transform 300ms ease;
        transform-origin: top;
    }

    .image-wrapper:hover .image-1 {
        transform: translate(0, 0);
    }

    .image-2 {
        clip-path: polygon(28% 0, 0 32%, 0 100%, 17% 100%, 90% 0);
        transform: translate(-30px, 5px);
        transition: transform 300ms ease;
    }

    .image-wrapper:hover .image-2 {
        transform: translate(0, 0);
    }

    .image-3 {
        clip-path: polygon(100% 0, 100% 65%, 74% 100%, 17% 100%, 90% 0);
        transform: translate(-15px, -10px);
        transition: transform 300ms ease;
    }

    .image-wrapper:hover .image-3 {
        transform: translate(0, 0);
    }

    .image-4 {
        clip-path: polygon(100% 65%, 74% 100%, 100% 100%);
        transform: translate(-32px, 5px);
        transition: transform 300ms ease;
        transform-origin: top;
    }

    .image-wrapper:hover .image-4 {
        transform: translate(0, 0);
    }
</style>

 

Une idée ? Partagez-la !

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *