Scribd Logo
Upload

Welcome to Scribd!

  • Hover Image

    Uploaded by

    Allison Moody
    23 views4 pages
    Zoom slike html, css

    Original Title

    hover-image

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Zoom slike html, css

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    23 views4 pages

    Hover Image

    Uploaded by

    Allison Moody
    Zoom slike html, css

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 4

    HTML-code

    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
    <meta charset="UTF-8">
    <title>Image Hover Transform Effect</title>
    <link rel="stylesheet" type="text/css" href="style.css" media="all" />
    </head>
    <body>

    <h1>Image Hover Transform Effect</h1>


    <div class="row">
    <div class="image">
    <div id="zoom-In">
    <figure>
    <img src="images/canyon-1.jpg" alt="" />
    </figure>
    <h3>Zoom In</h3>
    <p>Lorem Ipsum is simply dummy text of the
    printing and typesetting industry. Lorem Ipsum has been the industry's standard
    dummy text specimen book.</p>
    </div>
    </div>
    <div class="image">
    <div id="zoom-In">
    <figure>
    <img src="images/bird.jpg" alt="" />
    </figure>
    <h3>Zoom In</h3>
    <p>Lorem Ipsum is simply dummy text of the
    printing and typesetting industry. Lorem Ipsum has been the industry's standard
    dummy text specimen book.</p>
    </div>
    </div>
    <div class="image">
    <div id="zoom-In">
    <figure>
    <img src="images/canyon.jpg" alt="" />
    </figure>
    <h3>Zoom In</h3>
    <p>Lorem Ipsum is simply dummy text of the
    printing and typesetting industry. Lorem Ipsum has been the industry's standard
    dummy text specimen book.</p>
    </div>
    </div>
    </div>

    </body>
    </html>
    css-code

    body {
    margin: 0;
    padding: 0;
    background: #D9DCE1;
    font-size: 20px;
    }
    h1 {
    font-size: 40px;
    text-align: center;
    }
    .image {
    display: inline-block;
    text-align:center;
    width: 33%;
    float: left;
    }
    figure {
    overflow: hidden;
    margin: 0 10px;
    }
    h3 {
    color: #000;
    margin-top: 40px;
    }
    p{
    padding: 0 10px;
    }
    .image img {
    display: block;
    width: 100%;
    height: auto;
    cursor: pointer;
    }
    .image #zoom-In figure img {
    transform: scale(1);
    transition: 0.3s ease-in-out;
    }
    .image #zoom-In figure:hover img {
    transform: scale(1.5);
    }

    You might also like