{"id":746,"date":"2018-05-30T13:44:40","date_gmt":"2018-05-30T13:44:40","guid":{"rendered":"https:\/\/www.templatemonster.com\/fr\/blog\/?p=746"},"modified":"2020-04-09T11:16:47","modified_gmt":"2020-04-09T11:16:47","slug":"effets-de-survol-css3-gratuits-pour-votre-site-web","status":"publish","type":"post","link":"https:\/\/monsterspost.com\/fr\/effets-de-survol-css3-gratuits-pour-votre-site-web\/","title":{"rendered":"Effets de survol CSS3 gratuits pour votre site web"},"content":{"rendered":"<p style=\"text-align: justify\">CSS est une technologie incroyable, avec son aide, vous pouvez cr\u00e9er des choses vraiment incroyables.\u00a0En utilisant \u00abtout ce pouvoir\u00bb, vous pouvez ajouter toutes sortes de <a href=\"https:\/\/www.templatemonster.com\/blog\/fr\/meilleurs-outils-danimation-html5-gratuits-2018-pour-definir-vos-pages-en-mouvement\/\" target=\"_blank\" rel=\"noopener noreferrer\">effets visuels<\/a>\u00a0\u00e0 votre ressource. Donc, aujourd'hui, nous allons parler des<strong> effets de survol<\/strong>\u00a0<strong>CSS3<\/strong>. Nous avons pr\u00e9par\u00e9 une s\u00e9rie de tutoriels pour vous permettre d'ajouter du mouvement \u00e0 vos conceptions.<\/p>\n<div class=\"spacer\" style=\"text-align: center\"><\/div>\n<p style=\"text-align: justify\">Le survol d'image peut \u00eatre appliqu\u00e9 \u00e0 n'importe quelle image sur votre blog ou votre site, il suffit d'ajouter quelques lignes de code \u00e0 votre fichier CSS. Ces effets vont certainement \u00e9tonner vos visiteurs. Tout ce qui est n\u00e9cessaire est de passer la souris et le miracle arrive. Il est temps pour moi d'arr\u00eater de parler et de jeter un coup d'\u0153il aux exemples que nous avons choisis pour vous. Profitez de ces tuts et n'h\u00e9sitez pas \u00e0 utiliser ces superbes effets.<\/p>\n<p style=\"text-align: center\">***<\/p>\n<p style=\"text-align: center\"><a href=\"http:\/\/tympanus.net\/codrops\/2012\/04\/09\/direction-aware-hover-effect-with-css3-and-jquery\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Direction-Aware Hover Effect<\/a><\/p>\n<p style=\"text-align: center\"><a href=\"http:\/\/tympanus.net\/codrops\/2012\/04\/09\/direction-aware-hover-effect-with-css3-and-jquery\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-37615\" title=\"Direction-Aware Hover Effect\" src=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2013\/07\/Direction-Aware-Hover-Effect.jpg?x20232\" alt=\"\" width=\"620\" height=\"328\" data-lazy-loaded=\"true\" \/><\/a><\/p>\n<p style=\"text-align: center\"><a href=\"http:\/\/tympanus.net\/TipsTricks\/DirectionAwareHoverEffect\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">D\u00e9mo<\/a><\/p>\n<p style=\"text-align: center\">***<\/p>\n<p style=\"text-align: center\"><a href=\"http:\/\/tympanus.net\/codrops\/2012\/08\/08\/circle-hover-effects-with-css-transitions\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Circle Hover Effects<\/a><\/p>\n<p style=\"text-align: center\"><a href=\"http:\/\/tympanus.net\/codrops\/2012\/08\/08\/circle-hover-effects-with-css-transitions\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-37610\" title=\"Circle Hover Effects\" src=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2013\/07\/Circle-Hover-Effects.jpg?x20232\" alt=\"\" width=\"620\" height=\"328\" data-lazy-loaded=\"true\" \/><\/a><\/p>\n<p style=\"text-align: center\"><a href=\"http:\/\/tympanus.net\/Tutorials\/CircleHoverEffects\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">D\u00e9mo<\/a><\/p>\n<p style=\"text-align: center\">***<\/p>\n<p style=\"text-align: center\"><a href=\"http:\/\/webdesignandsuch.com\/create-overlay-on-image-hover-jquery-css3\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"broken_link\">Magnifying Glass Overlay<\/a><\/p>\n<p style=\"text-align: center\"><a href=\"http:\/\/webdesignandsuch.com\/create-overlay-on-image-hover-jquery-css3\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"broken_link\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-37614\" title=\"magnifying glass overlay\" src=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2013\/07\/magnifying-glass-overlay.jpg?x20232\" alt=\"\" width=\"620\" height=\"328\" data-lazy-loaded=\"true\" \/><\/a><\/p>\n<p style=\"text-align: center\"><a href=\"http:\/\/webdesignandsuch.com\/posts\/jquery-image-rollover\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"broken_link\">D\u00e9mo<\/a><\/p>\n<p style=\"text-align: center\">***<\/p>\n<p style=\"text-align: center\"><a href=\"http:\/\/www.script-tutorials.com\/css3-image-hover-effects\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">CSS3 Image Hover Effects<\/a><\/p>\n<p style=\"text-align: center\"><a href=\"http:\/\/www.script-tutorials.com\/css3-image-hover-effects\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-37592\" title=\"CSS3 Image Hover Effects\" src=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2013\/07\/CSS3-Image-Hover-Effects.jpg?x20232\" alt=\"\" width=\"620\" height=\"328\" data-lazy-loaded=\"true\" \/><\/a><\/p>\n<p style=\"text-align: center\"><a href=\"http:\/\/www.script-tutorials.com\/demos\/225\/index.html\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">D\u00e9mo<\/a><\/p>\n<p style=\"text-align: center\">***<\/p>\n<p style=\"text-align: center\"><a href=\"http:\/\/www.htmldrive.net\/items\/download\/1246\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"broken_link\">Fancy CSS3 Transitions Image Gallery<\/a><\/p>\n<p style=\"text-align: center\"><a href=\"http:\/\/www.htmldrive.net\/items\/download\/1246\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"broken_link\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-37594\" title=\"Fancy CSS3 Transitions Image Gallery\" src=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2013\/07\/Fancy-CSS3-Transitions-Image-Gallery.jpg?x20232\" alt=\"\" width=\"620\" height=\"328\" data-lazy-loaded=\"true\" \/><\/a><\/p>\n<p style=\"text-align: center\"><a href=\"http:\/\/www.htmldrive.net\/items\/demo\/1246\/Fancy-CSS3-Transitions-Image-Gallery-\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"broken_link\">D<\/a><\/p>\n<p style=\"text-align: center\">***<\/p>\n<p style=\"text-align: center\"><a href=\"http:\/\/www.htmldrive.net\/items\/download\/381\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"broken_link\">Snazzy Hover Effects Using CSS3<\/a><\/p>\n<p style=\"text-align: center\"><a href=\"http:\/\/www.htmldrive.net\/items\/download\/381\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"broken_link\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-37600\" title=\"Snazzy Hover Effects Using CSS3\" src=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2013\/07\/Snazzy-Hover-Effects-Using-CSS3.jpg?x20232\" alt=\"\" width=\"620\" height=\"328\" data-lazy-loaded=\"true\" \/><\/a><\/p>\n<p style=\"text-align: center\"><a href=\"http:\/\/www.htmldrive.net\/items\/demo\/381\/Snazzy-Hover-Effects-Using-CSS3\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"broken_link\">D\u00e9mo<\/a><\/p>\n<p style=\"text-align: center\">***<\/p>\n<p style=\"text-align: center\"><a href=\"http:\/\/www.htmldrive.net\/items\/download\/545\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"broken_link\">Popout Details on Hover CSS3<\/a><\/p>\n<p style=\"text-align: center\"><a href=\"http:\/\/www.htmldrive.net\/items\/download\/545\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"broken_link\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-37601\" title=\"Popout Details on Hover CSS3\" src=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2013\/07\/Popout-Details-on-Hover-CSS3.jpg?x20232\" alt=\"\" width=\"620\" height=\"328\" data-lazy-loaded=\"true\" \/><\/a><\/p>\n<p style=\"text-align: center\"><a href=\"http:\/\/www.htmldrive.net\/items\/demo\/545\/Popout-Details-on-Hover-CSS3\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"broken_link\">D\u00e9mo<\/a><\/p>\n<p style=\"text-align: center\">***<\/p>\n<p style=\"text-align: center\"><a href=\"http:\/\/www.oqzigen.com\/2013\/02\/how-to-make-css-image-hover-effects.html\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"broken_link\">CSS Image Hover Effects<\/a><\/p>\n<div class=\"wp_syntax\" style=\"text-align: center\">\n<table>\n<tbody>\n<tr>\n<td class=\"line_numbers\">\n<pre>1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n10\r\n11\r\n12\r\n13\r\n14\r\n15\r\n16\r\n17\r\n18\r\n19\r\n20\r\n<\/pre>\n<\/td>\n<td class=\"code\" style=\"text-align: left\">\n<pre class=\"php\">.hover1 img {\r\n     opacity: 0.5;\r\n     filter: progid:DXImageTransform.Microsoft.Matrix(\r\n                    M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');\r\n     zoom: 1; \r\n     -moz-transition: all 0.5s ease-out;  \r\n     -o-transition: all 0.5s ease-out;  \r\n     -webkit-transition: all 0.8s ease-out;  \r\n     -ms-transition: all 0.5s ease-out;  \r\n     transition: all 0.5s ease-out;\r\n}\r\n.hover1:hover img {\r\n     opacity: 1;\r\n     filter: progid:DXImageTransform.Microsoft.Matrix(\r\n                    M11=1, M12=0, M21=0, M22=1, sizingMethod='auto expand');\r\n     zoom: 1;\r\n     -moz-box-shadow: 1px 1px 4px #000;\r\n     -webkit-box-shadow: 1px 1px 4px #000;\r\n     box-shadow: 1px 1px 4px #000;\r\n}<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p style=\"text-align: center\">***<\/p>\n<p style=\"text-align: center\"><a href=\"http:\/\/www.hongkiat.com\/blog\/css3-image-captions\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">6 Image Captions<\/a><\/p>\n<p style=\"text-align: center\"><a href=\"http:\/\/www.hongkiat.com\/blog\/css3-image-captions\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-37602\" title=\"6 Image Captions\" src=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2013\/07\/6-Image-Captions.jpg?x20232\" alt=\"\" width=\"620\" height=\"328\" data-lazy-loaded=\"true\" \/><\/a><\/p>\n<p style=\"text-align: center\"><a href=\"http:\/\/demo.hongkiat.com\/css3-image-captions\/index.html\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"broken_link\">D\u00e9mo<\/a><\/p>\n<p style=\"text-align: center\">***<\/p>\n<p style=\"text-align: center\"><a href=\"http:\/\/webtuts.way2tutorial.com\/awesome-animated-css3-image-hover-effects-text\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"broken_link\">Awesome CSS3 Image Animated Hover Effects<\/a><\/p>\n<p style=\"text-align: center\"><a href=\"http:\/\/webtuts.way2tutorial.com\/awesome-animated-css3-image-hover-effects-text\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"broken_link\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-37603\" title=\"Awesome CSS3 Image Animated Hover Effects\" src=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2013\/07\/Awesome-CSS3-Image-Animated-Hover-Effects.jpg?x20232\" alt=\"\" width=\"620\" height=\"328\" data-lazy-loaded=\"true\" \/><\/a><\/p>\n<p style=\"text-align: center\"><a href=\"http:\/\/way2tutorial.com\/demos\/css-image-hover-effects\/demo.html\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"broken_link\">D\u00e9mo<\/a><\/p>\n<p style=\"text-align: center\">***<\/p>\n<p style=\"text-align: center\"><a href=\"http:\/\/barkamedia.wordpress.com\/2013\/03\/29\/10-easy-image-hover-effects-you-can-copy-and-paste\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"broken_link\">10 Easy Image Hover Effects You Can Copy and Paste<\/a><\/p>\n<p style=\"text-align: center\"><a href=\"http:\/\/barkamedia.wordpress.com\/2013\/03\/29\/10-easy-image-hover-effects-you-can-copy-and-paste\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"broken_link\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-37606\" title=\"10 Easy Image Hover Effects You Can Copy and Paste\" src=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2013\/07\/10-Easy-Image-Hover-Effects-You-Can-Copy-and-Paste.jpg?x20232\" alt=\"\" width=\"620\" height=\"328\" data-lazy-loaded=\"true\" \/><\/a><\/p>\n<p style=\"text-align: center\"><a href=\"http:\/\/designshack.net\/tutorialexamples\/imagehovers\/index.html\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">D\u00e9mo<\/a><\/p>\n<p style=\"text-align: center\">***<\/p>\n<p style=\"text-align: center\"><a href=\"http:\/\/www.webstutorial.com\/css3-image-hover-effects\/css3\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">CSS3 Image Hover Effects With Caption<\/a><\/p>\n<p style=\"text-align: center\"><a href=\"http:\/\/www.webstutorial.com\/css3-image-hover-effects\/css3\" target=\"_blank\" rel=\"nofollow noopener noreferrer\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-37607\" title=\"CSS3 Image Hover Effects With Caption\" src=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2013\/07\/CSS3-Image-Hover-Effects-With-Caption.jpg?x20232\" alt=\"\" width=\"620\" height=\"328\" data-lazy-loaded=\"true\" \/><\/a><\/p>\n<p style=\"text-align: center\"><a href=\"http:\/\/demo.webstutorial.com\/css3-author\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">D\u00e9mo<\/a><\/p>\n<p style=\"text-align: center\">***<\/p>\n<p style=\"text-align: center\"><a href=\"http:\/\/www.webtutorialplus.com\/css-hover-effects\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"broken_link\">5 CSS Hover Effects You Will Love To Use<\/a><\/p>\n<p style=\"text-align: center\"><a href=\"http:\/\/www.webtutorialplus.com\/css-hover-effects\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"broken_link\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-37608\" title=\"5 CSS Hover Effects You Will Love To Use\" src=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2013\/07\/5-CSS-Hover-Effects-You-Will-Love-To-Use.jpg?x20232\" alt=\"\" width=\"620\" height=\"328\" data-lazy-loaded=\"true\" \/><\/a><\/p>\n<p style=\"text-align: center\"><a href=\"http:\/\/www.webtutorialplus.com\/css-hover-effect.htm\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"broken_link\">D\u00e9mo<\/a><\/p>\n<p style=\"text-align: center\">***<\/p>\n<p style=\"text-align: center\"><a href=\"https:\/\/www.osignite.com\/blog\/item\/6-fastest-css-image-mouseover-effect.html\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"broken_link\">Fastest CSS Image Mouseover Effect<\/a><\/p>\n<div class=\"wp_syntax\" style=\"text-align: center\">\n<table>\n<tbody>\n<tr>\n<td class=\"line_numbers\">\n<pre>1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n10\r\n<\/pre>\n<\/td>\n<td class=\"code\" style=\"text-align: left\">\n<pre class=\"php\">a.cssmouseover {\r\ndisplay:block;\r\nwidth:200px;\r\nheight:300px;\r\nbackground-image:url(pathto\/image.jpg);\r\nbackground-position:0px 0px;\r\n}\r\na.cssmouseover:hover {\r\nbackground-position:0px -300px;\r\n}<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p style=\"text-align: center\">***<\/p>\n<p style=\"text-align: center\"><a href=\"http:\/\/www.jacklmoore.com\/zoom\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">jQuery Zoom<\/a><\/p>\n<div class=\"wp_syntax\" style=\"text-align: center\">\n<table>\n<tbody>\n<tr>\n<td class=\"line_numbers\">\n<pre>1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n10\r\n11\r\n12\r\n13\r\n14\r\n<\/pre>\n<\/td>\n<td class=\"code\" style=\"text-align: left\">\n<pre class=\"php\">\/\/ Example:\r\n$(document).ready(function(){\r\n  $('a.photo').zoom({url: 'photo-big.jpg'});\r\n});\r\n\u00a0\r\n\/\/ Using Colorbox with Zoom\r\n$(document).ready(function(){\r\n  $('a.photo').zoom({\r\n    url: 'photo-big.jpg', \r\n    callback: function(){\r\n      $(this).colorbox({href: this.src});\r\n    }\r\n  });\r\n});<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p style=\"text-align: center\">***<\/p>\n<p style=\"text-align: center\"><a href=\"http:\/\/tympanus.net\/codrops\/2012\/01\/04\/thumbnail-proximity-effect\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">PROXIMITY EFFECT WITH JQUERY AND CSS3<\/a><\/p>\n<p style=\"text-align: center\"><a href=\"http:\/\/tympanus.net\/codrops\/2012\/01\/04\/thumbnail-proximity-effect\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-37616\" title=\"PROXIMITY EFFECT WITH JQUERY AND CSS3\" src=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2013\/07\/PROXIMITY-EFFECT-WITH-JQUERY-AND-CSS3.jpg?x20232\" alt=\"\" width=\"620\" height=\"328\" data-lazy-loaded=\"true\" \/><\/a><\/p>\n<p style=\"text-align: center\"><a href=\"http:\/\/tympanus.net\/Tutorials\/ProximityEffect\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">D\u00e9mo<\/a><\/p>\n<p style=\"text-align: center\">***<\/p>\n<p style=\"text-align: center\"><a href=\"http:\/\/tympanus.net\/codrops\/2011\/12\/14\/item-blur-effect-with-css3-and-jquery\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Item Blur Effect With CSS3 &amp; jQuery<\/a><\/p>\n<p style=\"text-align: center\"><a href=\"http:\/\/tympanus.net\/codrops\/2011\/12\/14\/item-blur-effect-with-css3-and-jquery\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-37617\" title=\"Item Blur Effect With CSS3 &amp; jQuery\" src=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2013\/07\/Item-Blur-Effect-With-CSS3-jQuery.jpg?x20232\" alt=\"\" width=\"620\" height=\"328\" data-lazy-loaded=\"true\" \/><\/a><\/p>\n<p style=\"text-align: center\"><a href=\"http:\/\/tympanus.net\/Tutorials\/ItemBlur\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">D\u00e9mo<\/a><\/p>\n<p style=\"text-align: center\">***<\/p>\n<p style=\"text-align: center\"><a href=\"http:\/\/tympanus.net\/codrops\/2012\/05\/09\/how-to-create-a-fast-hover-slideshow-with-css3\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Fast Hover Slideshow<\/a><\/p>\n<p style=\"text-align: center\"><a href=\"http:\/\/tympanus.net\/codrops\/2012\/05\/09\/how-to-create-a-fast-hover-slideshow-with-css3\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-37618\" title=\"Fast Hover Slideshow\" src=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2013\/07\/Fast-Hover-Slideshow.jpg?x20232\" alt=\"\" width=\"620\" height=\"328\" data-lazy-loaded=\"true\" \/><\/a><\/p>\n<p style=\"text-align: center\"><a href=\"http:\/\/tympanus.net\/TipsTricks\/FastHoverSlideshow\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">D\u00e9mo<\/a><\/p>\n<p style=\"text-align: center\">***<\/p>\n<p style=\"text-align: center\"><a href=\"http:\/\/tympanus.net\/codrops\/2010\/07\/04\/image-highlighting-preview\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">IMAGE HIGHLIGHTING AND PREVIEW WITH JQUERY<\/a><\/p>\n<div class=\"wp_syntax\" style=\"text-align: center\">\n<table>\n<tbody>\n<tr>\n<td class=\"line_numbers\">\n<pre>1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n10\r\n11\r\n<\/pre>\n<\/td>\n<td class=\"code\" style=\"text-align: left\">\n<pre class=\"php\">.ih_overlay{\r\n    position:fixed;\r\n    top:0px;\r\n    left:0px;\r\n    right:0px;\r\n    bottom:0px;\r\n    background:#000;\r\n    z-index:10;\r\n    opacity:0.9;\r\n    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);\r\n}<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p style=\"text-align: center\">***<\/p>\n<p style=\"text-align: left\">Voil\u00e0. J'esp\u00e8re que vous avez appr\u00e9ci\u00e9 notre s\u00e9lection, si vous avez d'autres exemples dans votre esprit <strong>n'h\u00e9sitez pas \u00e0 les partager dans la section commentaires ci-dessous<\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>CSS est une technologie incroyable, avec son aide, vous pouvez cr\u00e9er des choses vraiment incroyables.\u00a0En utilisant \u00abtout ce pouvoir\u00bb, vous pouvez ajouter toutes sortes de effets visuels\u00a0\u00e0 votre ressource. Donc, aujourd'hui, nous allons parler des effets de survol\u00a0CSS3. Nous avons pr\u00e9par\u00e9 une s\u00e9rie de tutoriels pour vous permettre d'ajouter du mouvement \u00e0 vos conceptions. Le [&hellip;]<\/p>\n","protected":false},"author":1672325,"featured_media":749,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[29,25],"tags":[64],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.11 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Effets de survol CSS3 gratuits pour votre site web \u2b50 TemplateMonster Blog France<\/title>\n<meta name=\"description\" content=\"CSS est une technologie incroyable, avec son aide, vous pouvez cr\u00e9er des choses vraiment incroyables.\u00a0En utilisant \u00abtout ce pouvoir\u00bb, vous pouvez ajouter\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/monsterspost.com\/fr\/effets-de-survol-css3-gratuits-pour-votre-site-web\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Effets de survol CSS3 gratuits pour votre site web \u2b50 TemplateMonster Blog France\" \/>\n<meta property=\"og:description\" content=\"CSS est une technologie incroyable, avec son aide, vous pouvez cr\u00e9er des choses vraiment incroyables.\u00a0En utilisant \u00abtout ce pouvoir\u00bb, vous pouvez ajouter\" \/>\n<meta property=\"og:url\" content=\"https:\/\/monsterspost.com\/fr\/effets-de-survol-css3-gratuits-pour-votre-site-web\/\" \/>\n<meta property=\"og:site_name\" content=\"TemplateMonster Blog France\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/TemplateMonsterFrance\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-05-30T13:44:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-04-09T11:16:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/monsterspost.com\/fr\/wp-content\/uploads\/sites\/9\/2018\/05\/21.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"538\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Claire\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@TM_France\" \/>\n<meta name=\"twitter:site\" content=\"@TM_France\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Claire\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/monsterspost.com\/fr\/effets-de-survol-css3-gratuits-pour-votre-site-web\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/fr\/effets-de-survol-css3-gratuits-pour-votre-site-web\/\"},\"author\":{\"name\":\"Claire\",\"@id\":\"https:\/\/monsterspost.com\/fr\/#\/schema\/person\/4884946d097972046d54ec3b5524621c\"},\"headline\":\"Effets de survol CSS3 gratuits pour votre site web\",\"datePublished\":\"2018-05-30T13:44:40+00:00\",\"dateModified\":\"2020-04-09T11:16:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/monsterspost.com\/fr\/effets-de-survol-css3-gratuits-pour-votre-site-web\/\"},\"wordCount\":300,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/fr\/#organization\"},\"keywords\":[\"Gratuit\"],\"articleSection\":[\"D\u00e9veloppement Web\",\"Tutoriels\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/monsterspost.com\/fr\/effets-de-survol-css3-gratuits-pour-votre-site-web\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/monsterspost.com\/fr\/effets-de-survol-css3-gratuits-pour-votre-site-web\/\",\"url\":\"https:\/\/monsterspost.com\/fr\/effets-de-survol-css3-gratuits-pour-votre-site-web\/\",\"name\":\"Effets de survol CSS3 gratuits pour votre site web \u2b50 TemplateMonster Blog France\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/fr\/#website\"},\"datePublished\":\"2018-05-30T13:44:40+00:00\",\"dateModified\":\"2020-04-09T11:16:47+00:00\",\"description\":\"CSS est une technologie incroyable, avec son aide, vous pouvez cr\u00e9er des choses vraiment incroyables.\u00a0En utilisant \u00abtout ce pouvoir\u00bb, vous pouvez ajouter\",\"breadcrumb\":{\"@id\":\"https:\/\/monsterspost.com\/fr\/effets-de-survol-css3-gratuits-pour-votre-site-web\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/monsterspost.com\/fr\/effets-de-survol-css3-gratuits-pour-votre-site-web\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/monsterspost.com\/fr\/effets-de-survol-css3-gratuits-pour-votre-site-web\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/monsterspost.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Effets de survol CSS3 gratuits pour votre site web\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/monsterspost.com\/fr\/#website\",\"url\":\"https:\/\/monsterspost.com\/fr\/\",\"name\":\"TemplateMonster Blog France\",\"description\":\"Just another MonsterPost Sites site\",\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/monsterspost.com\/fr\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/monsterspost.com\/fr\/#organization\",\"name\":\"MonsterPost France\",\"url\":\"https:\/\/monsterspost.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/monsterspost.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/monsterspost.com\/fr\/wp-content\/uploads\/sites\/9\/2020\/03\/Logo-TM.png\",\"contentUrl\":\"https:\/\/monsterspost.com\/fr\/wp-content\/uploads\/sites\/9\/2020\/03\/Logo-TM.png\",\"width\":180,\"height\":180,\"caption\":\"MonsterPost France\"},\"image\":{\"@id\":\"https:\/\/monsterspost.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.instagram.com\/template_monster\/\",\"https:\/\/www.pinterest.com\/templatemonster\/\",\"https:\/\/www.youtube.com\/user\/TemplateMonsterCo\/\",\"https:\/\/www.facebook.com\/TemplateMonsterFrance\/\",\"https:\/\/twitter.com\/TM_France\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/monsterspost.com\/fr\/#\/schema\/person\/4884946d097972046d54ec3b5524621c\",\"name\":\"Claire\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/monsterspost.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/db0976148c5793ad6317a44bd5f93582?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/db0976148c5793ad6317a44bd5f93582?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g\",\"caption\":\"Claire\"},\"description\":\"Claire est une \u00e9crivaine talentueuse et curieuse. Sa principale priorit\u00e9 est de transmettre en termes simples des informations difficiles. Elle adore le monde de la conception Web et partage des trucs sympas sur sa page Facebook. Elle s'int\u00e9resse \u00e9galement activement \u00e0 la litt\u00e9rature, aux traductions et communique avec plaisir avec les abonn\u00e9s en ligne.\",\"url\":\"https:\/\/monsterspost.com\/fr\/author\/claire\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Effets de survol CSS3 gratuits pour votre site web \u2b50 TemplateMonster Blog France","description":"CSS est une technologie incroyable, avec son aide, vous pouvez cr\u00e9er des choses vraiment incroyables.\u00a0En utilisant \u00abtout ce pouvoir\u00bb, vous pouvez ajouter","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/monsterspost.com\/fr\/effets-de-survol-css3-gratuits-pour-votre-site-web\/","og_locale":"fr_FR","og_type":"article","og_title":"Effets de survol CSS3 gratuits pour votre site web \u2b50 TemplateMonster Blog France","og_description":"CSS est une technologie incroyable, avec son aide, vous pouvez cr\u00e9er des choses vraiment incroyables.\u00a0En utilisant \u00abtout ce pouvoir\u00bb, vous pouvez ajouter","og_url":"https:\/\/monsterspost.com\/fr\/effets-de-survol-css3-gratuits-pour-votre-site-web\/","og_site_name":"TemplateMonster Blog France","article_publisher":"https:\/\/www.facebook.com\/TemplateMonsterFrance\/","article_published_time":"2018-05-30T13:44:40+00:00","article_modified_time":"2020-04-09T11:16:47+00:00","og_image":[{"width":900,"height":538,"url":"https:\/\/monsterspost.com\/fr\/wp-content\/uploads\/sites\/9\/2018\/05\/21.jpg","type":"image\/jpeg"}],"author":"Claire","twitter_card":"summary_large_image","twitter_creator":"@TM_France","twitter_site":"@TM_France","twitter_misc":{"\u00c9crit par":"Claire","Dur\u00e9e de lecture estim\u00e9e":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/monsterspost.com\/fr\/effets-de-survol-css3-gratuits-pour-votre-site-web\/#article","isPartOf":{"@id":"https:\/\/monsterspost.com\/fr\/effets-de-survol-css3-gratuits-pour-votre-site-web\/"},"author":{"name":"Claire","@id":"https:\/\/monsterspost.com\/fr\/#\/schema\/person\/4884946d097972046d54ec3b5524621c"},"headline":"Effets de survol CSS3 gratuits pour votre site web","datePublished":"2018-05-30T13:44:40+00:00","dateModified":"2020-04-09T11:16:47+00:00","mainEntityOfPage":{"@id":"https:\/\/monsterspost.com\/fr\/effets-de-survol-css3-gratuits-pour-votre-site-web\/"},"wordCount":300,"commentCount":0,"publisher":{"@id":"https:\/\/monsterspost.com\/fr\/#organization"},"keywords":["Gratuit"],"articleSection":["D\u00e9veloppement Web","Tutoriels"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/monsterspost.com\/fr\/effets-de-survol-css3-gratuits-pour-votre-site-web\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/monsterspost.com\/fr\/effets-de-survol-css3-gratuits-pour-votre-site-web\/","url":"https:\/\/monsterspost.com\/fr\/effets-de-survol-css3-gratuits-pour-votre-site-web\/","name":"Effets de survol CSS3 gratuits pour votre site web \u2b50 TemplateMonster Blog France","isPartOf":{"@id":"https:\/\/monsterspost.com\/fr\/#website"},"datePublished":"2018-05-30T13:44:40+00:00","dateModified":"2020-04-09T11:16:47+00:00","description":"CSS est une technologie incroyable, avec son aide, vous pouvez cr\u00e9er des choses vraiment incroyables.\u00a0En utilisant \u00abtout ce pouvoir\u00bb, vous pouvez ajouter","breadcrumb":{"@id":"https:\/\/monsterspost.com\/fr\/effets-de-survol-css3-gratuits-pour-votre-site-web\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/monsterspost.com\/fr\/effets-de-survol-css3-gratuits-pour-votre-site-web\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/monsterspost.com\/fr\/effets-de-survol-css3-gratuits-pour-votre-site-web\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/monsterspost.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Effets de survol CSS3 gratuits pour votre site web"}]},{"@type":"WebSite","@id":"https:\/\/monsterspost.com\/fr\/#website","url":"https:\/\/monsterspost.com\/fr\/","name":"TemplateMonster Blog France","description":"Just another MonsterPost Sites site","publisher":{"@id":"https:\/\/monsterspost.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/monsterspost.com\/fr\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/monsterspost.com\/fr\/#organization","name":"MonsterPost France","url":"https:\/\/monsterspost.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/monsterspost.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/monsterspost.com\/fr\/wp-content\/uploads\/sites\/9\/2020\/03\/Logo-TM.png","contentUrl":"https:\/\/monsterspost.com\/fr\/wp-content\/uploads\/sites\/9\/2020\/03\/Logo-TM.png","width":180,"height":180,"caption":"MonsterPost France"},"image":{"@id":"https:\/\/monsterspost.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/template_monster\/","https:\/\/www.pinterest.com\/templatemonster\/","https:\/\/www.youtube.com\/user\/TemplateMonsterCo\/","https:\/\/www.facebook.com\/TemplateMonsterFrance\/","https:\/\/twitter.com\/TM_France"]},{"@type":"Person","@id":"https:\/\/monsterspost.com\/fr\/#\/schema\/person\/4884946d097972046d54ec3b5524621c","name":"Claire","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/monsterspost.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/db0976148c5793ad6317a44bd5f93582?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/db0976148c5793ad6317a44bd5f93582?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g","caption":"Claire"},"description":"Claire est une \u00e9crivaine talentueuse et curieuse. Sa principale priorit\u00e9 est de transmettre en termes simples des informations difficiles. Elle adore le monde de la conception Web et partage des trucs sympas sur sa page Facebook. Elle s'int\u00e9resse \u00e9galement activement \u00e0 la litt\u00e9rature, aux traductions et communique avec plaisir avec les abonn\u00e9s en ligne.","url":"https:\/\/monsterspost.com\/fr\/author\/claire\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/posts\/746"}],"collection":[{"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/users\/1672325"}],"replies":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/comments?post=746"}],"version-history":[{"count":3,"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/posts\/746\/revisions"}],"predecessor-version":[{"id":3679,"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/posts\/746\/revisions\/3679"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/media\/749"}],"wp:attachment":[{"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/media?parent=746"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/categories?post=746"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/tags?post=746"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}