در این مطلب نمونه 6 برای هاور بر تصاویر با عنوان CSS Image Hover رو در اختیارتون قرار میدم. امیدوارم که بتونین از اون ایده بگیرید و یا اینکه از اون در سایتتون استفاده کنید.
کد HTML :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <h2 id="demo06">6. Rotate<span>(+Zoom Out)</span></h2> <div class="hover06 column"> <div> <figure><img src="pic01.jpg" /></figure> <span>Hover</span> </div> <div> <figure><img src="pic02.jpg" /></figure> <span>Hover</span> </div> <div> <figure><img src="pic03.jpg" /></figure> <span>Hover</span> </div> </div> |
کد CSS :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 | @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300); body { color: #333; font-family: 'Open Sans', sans-serif; font-weight: 300; } h1, h1+p { margin: 30px 15px 0; font-weight: 300; } h1+p a { color: #333; } h1+p a:hover { text-decoration: none; } h2 { margin: 60px 15px 0; padding: 0; font-weight: 300; } h2 span { margin-left: 1em; color: #aaa; font-size: 85%; } .column { margin: 15px 15px 0; padding: 0; } .column:last-child { padding-bottom: 60px; } .column::after { content: ''; clear: both; display: block; } .column div { position: relative; float: left; width: 300px; height: 200px; margin: 0 0 0 25px; padding: 0; } .column div:first-child { margin-left: 0; } .column div span { position: absolute; bottom: -20px; left: 0; z-index: -1; display: block; width: 300px; margin: 0; padding: 0; color: #444; font-size: 18px; text-decoration: none; text-align: center; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; opacity: 0; } figure { width: 300px; height: 200px; margin: 0; padding: 0; background: #fff; overflow: hidden; } figure:hover+span { bottom: -36px; opacity: 1; } /* Rotate */ .hover06 figure img { -webkit-transform: rotate(15deg) scale(1.4); transform: rotate(15deg) scale(1.4); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .hover06 figure:hover img { -webkit-transform: rotate(0) scale(1); transform: rotate(0) scale(1); } |
امیدوارم خوشتون بیاد.
موفق باشید. یا علی
نوع کد رايگان
برچسب : نویسنده : استخدام کار 7learn بازدید : 287