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

index.html

<!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 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 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>

style.css

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

.section img{
    width: 300 px;
    height: 300 px;
    border-radius: 30 px; /* propriété qui arrondie les angles d'une image*/
}

.hover-effect img:hover{
    opacity: 0,8; /* propriété qui permet de modifier l'opacité*/
    cursor: pointer;
}

.img:nth-child(3){
    filter: grayscale(1); /* propriété qui permettent de mettre une image en noir et blanc */
    -webkit-filter: grayscale(1);
}