Классный эффект при наведении на фотографии с использованием Javascript и CSS3
Просто классный эффект при наведении на фотки. Может кому-то будет полезен
Для начала посмотрите ДЕМО
Установка:
1#: В самый верх вашего 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 |
@import url(https://fonts.googleapis.com/css?family=Poppins:300,700); .snip1581 { font-family: 'Poppins:400,700', Arial, sans-serif; position: relative; display: inline-block; overflow: hidden; margin: 10px; min-width: 250px; max-width: 310px; width: 100%; background-color: #000000; color: #ffffff; text-align: left; font-size: 16px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); } .snip1581 * { -webkit-transition: all 0.35s; transition: all 0.35s; -webkit-box-sizing: border-box; box-sizing: border-box; } .snip1581 img { max-width: 100%; vertical-align: top; } .snip1581 figcaption { position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 20px; background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.8) 0%, transparent 100%); background-image: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%); display: flex; flex-direction: column; justify-content: flex-end; } .snip1581 h3 { font-size: 44px; font-weight: 400; line-height: 1; letter-spacing: 1px; text-transform: uppercase; margin: 3px 0; } .snip1581 .title1 { font-weight: 700; } .snip1581 .title2 { color: #a58e7c; font-weight: 300; } .snip1581 .title3 { font-weight: 700; font-size: 25px; } .snip1581 a { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .snip1581:hover img, .snip1581.hover img { -webkit-transform: scale(1.3) rotate(5deg); transform: scale(1.3) rotate(5deg); } |
2#: В то место, где будут фотографии, вставьте:
|
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 |
<figure class="snip1581"><img src="ССЫЛКА_НА_КАРТИНКУ" alt="profile-sample2"/> <figcaption> <h3 class="title1">The</h3> <h3 class="title2">Winter</h3> <h3 class="title3">Collection</h3> </figcaption><a href="#"></a> </figure> <figure class="snip1581 hover"><img src="ССЫЛКА_НА_КАРТИНКУ" alt="profile-sample7"/> <figcaption> <h3 class="title1">The</h3> <h3 class="title2">Summer</h3> <h3 class="title3">Collection</h3> </figcaption><a href="#"></a> </figure> <figure class="snip1581"><img src="ССЫЛКА_НА_КАРТИНКУ" alt="profile-sample6"/> <figcaption> <h3 class="title1">The</h3> <h3 class="title2">Autumn</h3> <h3 class="title3">Collection</h3> </figcaption><a href="#"></a> </figure> <script type="text/javascript"> /* Demo purposes only */ var snippet = [].slice.call(document.querySelectorAll('.hover')); if (snippet.length) { snippet.forEach(function (snippet) { snippet.addEventListener('mouseout', function (event) { if (event.target.parentNode.tagName === 'figure') { event.target.parentNode.classList.remove('hover') } else { event.target.parentNode.classList.remove('hover') } }); }); } </script> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
