Простой LightBox эффект увеличения изображений на 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 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 |
a.lightbox img { height: 150px; border: 3px solid white; box-shadow: 0px 0px 8px rgba(0,0,0,.3); margin: 94px 20px 20px 20px; } /* Styles the lightbox, removes it from sight and adds the fade-in transition */ .lightbox-target { position: fixed; top: -100%; width: 100%; background: rgba(0,0,0,.7); width: 100%; opacity: 0; -webkit-transition: opacity .5s ease-in-out; -moz-transition: opacity .5s ease-in-out; -o-transition: opacity .5s ease-in-out; transition: opacity .5s ease-in-out; overflow: hidden; } /* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */ .lightbox-target img { margin: auto; position: absolute; top: 0; left:0; right:0; bottom: 0; max-height: 0%; max-width: 0%; border: 3px solid white; box-shadow: 0px 0px 8px rgba(0,0,0,.3); box-sizing: border-box; -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; } /* Styles the close link, adds the slide down transition */ a.lightbox-close { display: block; width:50px; height:50px; box-sizing: border-box; background: white; color: black; text-decoration: none; position: absolute; top: -80px; right: 0; -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; } /* Provides part of the "X" to eliminate an image from the close link */ a.lightbox-close:before { content: ""; display: block; height: 30px; width: 1px; background: black; position: absolute; left: 26px; top:10px; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); } /* Provides part of the "X" to eliminate an image from the close link */ a.lightbox-close:after { content: ""; display: block; height: 30px; width: 1px; background: black; position: absolute; left: 26px; top:10px; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg); } /* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */ .lightbox-target:target { opacity: 1; top: 0; bottom: 0; } .lightbox-target:target img { max-height: 100%; max-width: 100%; } .lightbox-target:target a.lightbox-close { top: 0px; } |
2#: Картинки с этим эффектом оформляются вот так:
|
1 2 3 4 5 6 7 |
<a class="lightbox" href="#dog"> <img src="ССЫЛКА_НА_КАРТИНКУ"/> </a> <div class="lightbox-target" id="dog"> <img src="ССЫЛКА_НА_КАРТИНКУ"/> <a class="lightbox-close" href="#"></a> </div> |
Обратите внимание, что у каждой картинки должен быть уникальный id в участке id="dog" и в ссылке target="_blank" rel="noopener noreferrer" href="#dog"
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
