Des formes arrondies au survol de vos images

Forme arrondi au passage de la souris

Code HTML MODIFIER/ juste avant ceci </b:template-skin>

======Recatangle/ Ovale ==========

.post-body img {

box-shadow: 0px 0px 12px #000; /* Ombre */

border-radius: 50%; /* Bordure arrondie */

border:0;

padding:0;

-moz-transition: all 1s;

-webkit-transition: all 1s;

-o-transition: all 1s;

}

.post-body img:hover {

box-shadow: 0; /* Suppr. l'ombre (valeur 0) */

border-radius: 0; /* Sppr. l'arrondi de la bordure (valeur 0) */

-moz-transition: all 1s;

-webkit-transition: all 1s;

-o-transition: all 1s;

cursor:pointer;

}

===== Image rectangle / forme Style de noyau =======

.post-body img {

background:#5e6de4; /* Couleur d'arrière-plan autour de l'image */

padding:3px; /* Espace entre la bordure et l'image */

-moz-transition: tous les 1;

-webkit-transition: tous les 1;

-o-transition: tous les 1;

}

.post-body img:hover {

box-shadow: 0px 0px 12px #000; /* Ombre */

border-radius: 0% 50%; /* Bordure arrondie */

-moz-transition: tous les 1;

-webkit-transition: tous les 1;

-o-transition: tous les 1;

cursor:pointer;

}

====== Style de noyau a rectangle == ====

.post-body img {

background:#FFF; /* Couleur d'arrière-plan autour de l'image * /

padding:15px; /* L'espace entre la bordure et l'image */

border-radius: 50% 0; /* Bordure arrondie */

box-shadow: 0px 0px 15px #000; /* Ombre */

-moz-transition: all 1s;

-webkit-transition: all 1s;

-o-transition: all 1s;

}

.post-body img:hover {

border-radius:0; /* Suppr. l'arrondi de la bordure (valeur 0) */

-moz-transition: all 1s;

-webkit-transition: all 1s;

-o-transition: all 1s;

cursor:pointer;

}

============== Cylindre ==================

.post-body img {

border-radius: 45% / 20%; /* Bordure arrondie */

box-shadow: 0px 0px 12px #000; /* Ombre */

padding:0;

-moz-transition: all 1s;

-webkit-transition: all 1s;

-o-transition: all 1s;

}

.post-body img:hover {

border-radius: 0; /* Suppr. l'arrondi de la bordure (valeur 0) */

-moz-transition: all 1s;

-webkit-transition: all 1s;

-o-transition: all 1s;

cursor:pointer;

}

======== Ovale/ rectangle =============

.post-body img {

box-shadow: 0px 0px 12px #000; /* Ombre */

border-radius: 50%; /* Bordure arrondie */

border:0;

padding:0;

-moz-transition: all 1s;

-webkit-transition: all 1s;

-o-transition: all 1s;

}

.post-body img:hover {

box-shadow: 0; /* Suppr.  l'ombre (valeur 0) */

border-radius: 0; /* Suppr. l'arrondi de la bordure (valeur 0) */

-moz-transition: all 1s;

-webkit-transition: all 1s;

-o-transition: all 1s;

cursor:pointer;

}

=====NOTE========

Les effets s'applique sur les images de vos articles.

POur faire d'autres formes ''element'' amusez vous ici

https://9elements.github.io/fancy-border-radius/