05 - CSS : sélecteurs et propriétés

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Catch'em all!</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <main>
            <img class="hover-effect" src="http://images.innoveduc.fr/integration_parcours/css/css_selectors_props/hobbit-house.jpg" alt="Hobbit house">

            <p>Photo by conner Bowe on Unsplash</p>

            <img src="http://images.innoveduc.fr/integration_parcours/css/css_selectors_props/hobbit-house-grass.jpg" alt="Hobbit house with grass">

            <p>Photo by Jeff Finley on Unsplash</p>

            <img class="hover-effect" src="http://images.innoveduc.fr/integration_parcours/css/css_selectors_props/hobbit-house-grey-grass.jpg" alt="Hobbit house with grey grass">

            <p>Photo by Tyler Lastovich on Unsplash</p>
        </main>
    </body>
</html>

----------------------------------------------------------------------------------------------------------------------------
CSS:
body {
    font-family: 'Courier New', Courier, monospace;
}

/* English : Replace the dots below by a selector targeting all the images of the page. */


img {
    width: 300px;
    height: 300px;
    border-radius: 1em;      /* English : Replace with a property that makes the image borders look rounded. */

}


/* English : Replace the dots below by a class named "hover-effect" with a :hover pseudo-class. This class has to target the first image and the last image of the page. */


.hover-effect:hover{
    opacity : 0.8;      /* English : Replace with a property responsible for opacity changes. */

    cursor: pointer;

}

/* English : Replace the dots below by a selector targeting the second image of the page. Do not use a class or an id! */

img:nth-of-type(2) {
    filter: grayscale(100%);  /* English : Replace with a property that makes the image look black & white. */

}