• Selection fond 1

    Je me suis lancé dans un type de montage avec division d'une image en morceaux, que l'on peut reconstituer au survol d'un bouton, par exemple.

    Pour cela, il faut se souvenir que l'on peut remplir un cadre avec une partie précise d'une grande image; en multipliant le nombre de sélections, nous pouvons, par exemple, réaliser comme un puzzle qui se reconstitue au survol d'un élément.

    Revoyons le principe: une cadre, carré, rectangulaire ou rond peut être rempli avec une image en fond: background:url('http:/:...jpg');

    Avec un cadre de dimension inférieure à l'image, nous pouvons choisir la portion de l'image qui sera visible: background-position:50% 20%;

    Exemple: image d'origine puis sélection

     

     

    <p style="float: left; width: 20vw; height: 20vw; border-radius: 50%; background: url('http://ekladata.com/ZkRX1JjFDT5Gqhv1Nbr_9m-iDGA@860x540.jpg'); background-position: 52% 43%;">&nbsp;</p>

    Les unités sont ici en adaptatives mais vous pouvez les écrire en unités fixes: pixel (px).
    Avec ce principe, nous pouvons donner une animation au survol à la sélection:

     


    Voilà pour la rappel du principe; les prochaines pages seront des exemple parmi ceux que vous pouvez réaliser.

    Les dimensions que j'utilise sont de 80% des largeurs écran; si votre zone article est plus étroite, divisez par 2 toutes les valeurs (taille, positionnement, ombre, bordure...) pour obtenir une montage de moitié, s'il s'adapte à votre page.